如何从父父范围获取价值？

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 列表。

该按钮显示了一个模式，我想在其中显示 InnerCommunicationTopic 中的所有 InnerCommunicationMessage。我只是不知道该怎么做。

我在这里调用模态：

$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

对 ng-repeater 进行一些更改，其中将生成 Modal，而不是在单击按钮时传递 id，而是传递 [=17 的内容=] 这样你就可以将这些数据传递给模态。

所以像这样：

<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;
});

在您的模态框模板中，您可以拥有以下内容。

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

Answer 2

将该特定 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 3

在多个控制器之间共享一些数据的一个好方法是使用 Service。在 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>

然后您可以将项目传递给 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>

您可以看到 Working Plunker

如何从父父范围获取价值？

How to get value from parent parent scope?

angularjs

angularjs-scope

angularjs-ng-repeat

angular-ui-modal