angularjsangularjs-scopeangularjs-ng-repeatangular-ui-modal

How to get value from parent parent scope?


On one page I'm doing something like this:

<tr ng-repeat="innerCommunicationTopic in data.InnerCommunicationTopics">
    <td>{{innerCommunicationTopic.Topic | Empty}}</td>
    <td>{{innerCommunicationTopic.WhenCreatedStr | Empty}}</td>
    <td>{{innerCommunicationTopic.WhenLastChangeStr | Empty}}</td>
    <td><button class="btn btn-sm btn-default margins" ng-click="showMsgs(innerCommunicationTopic.id)">Pokaż</button></td>
</tr>

Each InnerCommunicationTopic does have a List of InnerCommunicationMessage(s).

The button shows a modal where I want to present all InnerCommunicationMessage(s) in InnerCommunicationTopic. I just don't have a clue how to do this.

I call the modal here:

$scope.showMsgs = function (topicId) {
    var modalInstance = $modal.open({
        animation: true,
        templateUrl: '/WWW/partials/createMsgModal.html'
    })
};

I've tried something like this in the modal:

<tr ng-repeat="innerCommunicationMessage in $parent.data.InnerCommunicationTopics[id].Messages">
    <td>{{innerCommunicationMessage.WhoCreated | Empty}}</td>
    <td>{{innerCommunicationMessage.WhenCreatedStr | Empty}}</td>
    <td>{{innerCommunicationMessage.Message | Empty}}</td>
</tr>

I know it's wrong, the id simply cannot work, but I don't really have an idea and I've already searched a lot for this. Thank you in advance!


Solution

  • Bind that specific id with scope and Pass your scope to modal like this:

    $scope.showMsgs = function (topicId) {
        $scope.topicId = topicId;
        var modalInstance = $modal.open({
            animation: true,
            templateUrl: '/WWW/partials/createMsgModal.html',
            scope: $scope
        })
    };
    

    Then in modal you can use topicId

    <tr ng-repeat="innerCommunicationMessage in data.InnerCommunicationTopics[topicId].Messages">
        <td>{{innerCommunicationMessage.WhoCreated | Empty}}</td>
        <td>{{innerCommunicationMessage.WhenCreatedStr | Empty}}</td>
        <td>{{innerCommunicationMessage.Message | Empty}}</td>
    </tr>
    

    This way you do not have to use $parent.data, only data will work, because this modal has scope of parent.