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 のリストがあります。

このボタンは、すべての InnerCommunicationMessage を InnerCommunicationTopic に表示するモーダルを示しています。これを行う方法がわかりません。

ここでモーダルを呼び出します。

$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 では Service は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>

次に、アイテムをshowhtml の関数に渡すことができます。

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>

ワーキングプランカーが見えます

于 2015-08-27T18:40:10.127 に答える
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 に答える