Нажав кнопку, которая будет использовать широковещательную передачу для модального отображения с данными

Question

На моей странице html (rollup.html) У меня есть кнопка, которая открывает модальную.

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

На странице Js (rollup.js) вот код, который позволяет модальный открыть при нажатии на кнопку

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

Затем вы должны определить «YourModalCtrl» впрыснуть «DataYouNeed» как зависимость. Это выглядит примерно так:

.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 scope scope). Таким образом, вам нужно определить любые данные ваших модальных потребностей в блоке «разрешить» (показано в первом фрагменте кода).