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

在多个控制器之间共享某些数据的一种正确方法是使用服务。在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

Answer 2

对将生成ng-repeater的{{1}}进行一些更改，而不是在点击按钮时传递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;
                        }
                    }
                });
    }
}

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

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

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

Answer 3

将该特定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才有效，因为此模式具有父级范围。

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

3 个答案: