データを表示するためのモーダルにブロードキャストを使用するボタンをクリック

Question

私のHTMLページ（rollup.html）には、モーダルを開くボタンがあります。ここのjsページ（rollup.js）で

<button id="myBtn" ng-click="printDivModal('rollup-tab')">ModalTest</button> 

モーダルが

$scope.printDivModal = function(divName) { 
      console.log('opening pop up'); 
      var ModalInstance = $uibModal.open({ 
       //animation: $ctrl.animationsEnabled, 
       templateUrl: 'app/views/modals/stackedModal.html', 
       size: 'lg', 
      }); 
     } 

ボタンをクリックすると、モーダルを開くことができますコードはstackedModal.html

で書かれているものを示しています

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">The Modal Header</h4> 
</div> 

<div class="modal-body"> 
    <p>Text inside the modal.</p> 
</div> 

<div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
</div> 

テーブルからデータを表示するために、ブロードキャストを使用してボタンがモーダルを開くようにします。 stackedModal.jsで私はそれを達成しようとしています。私はjsでコントローラを作成しています

var app = angular.module('dmdesktop'); 

app.controller('Rollup', rollUpCtrl); 
rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal','headersvc','locFiltersvc'] 
function rollUpCtrl($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) { 

     $rootScope.$broadcast('printerFriendly', service.searchFilter); 
     $scope.$on('printerFriendly', function(event, filter){ 
      $scope.searchFilter = filter; 
      $scope.getData(); 

      $scope.gridOptions.data = data; 
     }); 


} 

現在のところ、データのないモーダルが表示されています。どんな助けもありがとうございます。

Answer 1

$ uibModal.open構成の解決ブロックのデータを解決する必要があります。また、あなたが開きたいモーダルのコントローラも指定する必要があります。私が話しているかを確認するためのコードブロックをチェックしてください ：

templateUrl : 'templates/CustomModal.html', 
size: size, 
controller: 'YourModalCtrl' 
resolve: { 
    DataYouNeed: function(SomeDependency) { 
       // this should return a promise 
     return SomeDependency.query(); 
    } 
} 

を次に、あなたは依存関係として「DataYouNeed」を注入する「YourModalCtrl」を定義する必要があります。これは次のようになります。

.controller('YourModalCtrl', function (DataYouNeed) { 
    // DataYouNeed will be resolved BEFORE controller initialization 
    // thus, your modal will have the data before it opens. 
    // add any modal specific logic here. 
}); 

指定するモーダルコントローラには孤立した$スコープが付いています。つまり、このコントローラは$ scopeに置かれたデータにアクセスすることはできません（独自の$ scopeオブジェクトを持っています）。したがって、あなたはあなたのモーダルが '解決'ブロック（最初のコードスニペットに示されている）に必要なデータを定義する必要があります。