如何從父母級範圍獲取價值？

Question

在一個頁面上我做這樣的事情：

<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> 

每個InnerCommunicationTopic確實有InnerCommunicationMessage（S）的列表。

該按鈕顯示一個模式，我想要在InnerCommunicationTopic中顯示所有InnerCommunicationMessage（s）。我只是沒有線索如何做到這一點。

我所說的模式在這裏：

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

我已經試過像這樣的模式：

<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> 

我知道這是不對的，ID根本不能工作，但我並沒有真正的想法，我已經爲此搜尋了很多。先謝謝你！

Answer 1

綁定與範圍，並通過你的範圍特定的ID模態是這樣的：

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

然後在模式，您可以使用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> 

這樣你就不必要使用$parent.data，只有data將起作用，因爲此模式具有父級的範圍。

Answer 2

做一些更改ng-repeater其中Modal將產生從和而不是通過點擊按鈕時id，傳遞的InnerCommunicationTopics[id].Messages這樣的內容，你可以到模態傳遞此數據。

因此，像這樣：

<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(InnerCommunicationTopics[innerCommunicationTopic.id].Messages)"> 
     Pokaż 
    </button> 
    </td> 
</tr> 

現在在控制器上這就是處理按鈕點擊，獲取數據並且將它傳遞給模態，像這樣：

app.controller('MainWindowCtrl', function ($scope, $modal) { 

    $scope.dataToDisplayInModal = {}; 

    $scope.showMsgs = function(data){ 

     $scope.dataToDisplayInModal = { 
       topic: data[0], 
       whenCreated: data[1], 
       whenLastChanged: data[2] 
     }; 

     //Create your Modal and inside resolve we pass in the Data we crafted above. 
     var modalInstance = $modal.open({ 
        templateUrl: '../Scripts/Templates/WorkOrderModalTemplate.html', 
        controller: 'EditWorkOrderModalCtrl', 
        windowClass: 'app-modal-window', 
        backdrop: 'static', 
        keyboard: false, 
        resolve: { 
         dataToDisplayInModal: function() { 
          return $scope.dataToDisplayInModal; 
         } 
        } 
       }); 
    } 
} 

在您的Modal的控制器手柄中輸入數據

app.controller('EditWorkOrderModalCtrl', function ($scope, $modalInstance, dataToDisplayInModal) { 

    //Create local instance of the Data to use in this context 
    $scope.listOfMessages = dataToDisplayInModal; 
}); 

在您的Modal模板中，您可以獲得以下內容。

<tr ng-repeat="message in listOfMessages"> 
    <td>{{message.topic | Empty}}</td> 
    <td>{{message.whenCreate | Empty}}</td> 
    <td>{{message.whenLastChanged | Empty}}</td> 
</tr> 

Answer 3

在多個控制器之間共享一些數據的好方法是使用服務。在AngularJS中，服務是Singleton，因此您可以輕鬆共享數據。

服務

(function(){ 

    function Service(){ 

    var data; 

    function set(value){ 
     data = value; 
    } 

    function get(){ 
     return data; 
    } 

    return { 
     get: get, 
     set: set 
    }; 

    } 

    angular 
    .module('app') 
    .factory('Service', Service); 

})(); 

控制器

(function(){ 

function Controller($scope, Service, $modal) { 

    //Example of dataset 
    $scope.data = [ 
    { 
     name: 'toto', 
     id: '1', 
     list: [ 
     { 
      message:'ok', 
      id: '123' 
     }, 
     { 
      message: 'nop', 
      id: '456' 
     } 
     ] 
    }, { 
     name: 'john', 
     id: '2', 
     list: [ 
     { 
      message:'blabla', 
      id: '123d' 
     }, 
     { 
      message: 'l,kdn', 
      id: '94ss' 
     } 
     ] 
    } 
    ]; 

    $scope.show = function(data){ 
    //Set your data into your Service 
    Service.set(data); 
    var modalInstance = $modal.open({ 
     animation: true, 
     templateUrl: 'templateModal.html', 
     controller: function($scope){ 
     //Retrieve our data from your Service 
     $scope.data = Service.get(); 
     } 
    }) 

    } 

} 

angular 
.module('app', ['ui.bootstrap']) 
.controller('ctrl', Controller); 

})(); 

模板

<div class="modal-header"> 
    <h3 class="modal-title">List of {{data.name}}</h3> 
</div> 
<div class="modal-body"> 
    <ul ng-repeat="item in data.list"> 
    <li>Message : {{item.message}}</li> 
    <li>id : {{item.id}}</li> 
    </ul> 
</div> 

然後，你可以通過你的這em到您的html中的show函數。

HTML

<body ng-app='app' ng-controller="ctrl"> 

    <ul ng-repeat="item in data"> 
     <li>{{item.name}}</li> 
     <li>{{item.id}}</li> 
     <button class="btn btn-sm btn-default margins" ng-click="show(item)">Show modal</button> 
    </ul> 

    </body> 

你可以看到你想要`InnerCommunicationTopics`與你傳遞`$ scope.showMsgs =功能（topicId）{`ID的Working Plunker