0

在一页上，我正在做这样的事情：

<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根本无法工作，但我真的不知道，我已经为此搜索了很多。先感谢您！

4

3 回答 3

1

在多个控制器之间共享一些数据的一个好方法是使用Service。在 AngularJS 中，服务是单例的，因此您可以轻松地共享数据。

服务

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

然后你可以将你的项目传递给show你的 html 中的函数。

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

于 2015-08-27T18:40:10.127 回答
0

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

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

<tr ng-repeat="message in listOfMessages">
    <td>{{message.topic | Empty}}</td>
    <td>{{message.whenCreate | Empty}}</td>
    <td>{{message.whenLastChanged | Empty}}</td>
</tr>
于 2015-08-27T18:14:11.610 回答
0

将该特定 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工作，因为这个模式有父范围。

于 2015-08-27T18:30:44.890 回答