单击将使用广播模式的按钮以显示数据

在我的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; 
     }); 


}

它目前只显示没有数据的模态。任何帮助表示赞赏。

来源

2017-01-10 Adrew

您应该解析$ 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对象）。因此，您需要在'resolve'块中定义模态需要的任何数据（显示在第一个代码段中）。

来源

2017-01-10 17:58:57

有点困惑。我很抱歉，我对此很陌生。所以我必须解决$ uibModal中的数据，而不是在stackedModal.js控制器中的数据？我是否也应该在uibModal中包含广播？ @HunterBrennick – Adrew

设置你的模态配置类似于我在第一段代码中所做的配置，将确保'DataYouNeed'在'YourModalCtrl'初始化之前解析。在第二段代码中，我向您展示了如何将解析后的数据作为依赖项包含到模态控制器中（这样您可以将它附加到'$ scope'或任何其他您需要执行的操作）。您将在模式打开之前获得数据。 –

单击将使用广播模式的按钮以显示数据

回答

相关问题