AngularUI模式对话框 - 在“呈现”事件上调用对话框的控制器功能

时间:2015-08-25 21:39:55

标签: angularjs angular-ui angular-ui-bootstrap

我想在$ modal.rendered事件上调用dialog的控制器函数,这是否可行而不会污染$ scope?

以下是Plunkr示例:

http://plnkr.co/edit/HzFe65RY3hNme8QuUWaJ?p=preview

所以,承诺:

modalDialog.rendered.then(function () {
    demo.message = 'Dialog opened';
});

我想从modalController控制器调用onLoaded函数。

谢谢,最好的问候,

1 个答案:

答案 0 :(得分:0)

您可以使用工厂/服务来共享数据&跨控制器的功能;

angular.module('app', ['ui.bootstrap'])
.controller('demoController',['$modal', 'modalService', function($modal, service) {
  var demo = this;

  demo.message = 'It works!'

  demo.modal = function() {
    var modalDialog = $modal.open({
      controller: 'modalController',
      controllerAs: 'modal',
      templateUrl: 'modal.html'
    });

    modalDialog.rendered.then(function () {
      demo.message = 'Dialog opened';
      service.onLoaded();
    });
  };
}])
.controller('modalController', ['$modalInstance', 'modalService', function($modalInstance, service) {
  var modal = this;
  service.modalText = 'Modal Text';
  modal.shared = service;

  modal.cancel = function() {
    $modalInstance.dismiss();
  }

}])
.factory('modalService', function() {
  var service = {
    modalText: 'Modal text',
    onLoaded: onLoaded
  };
  return service;
  function onLoaded() {
    service.modalText = 'Modal loaded';
  }
})

以下更新为html;

<div class="modal-body">
    <pre>{{ modal.shared.modalText }}</pre>
</div>

更新了plunker:http://plnkr.co/edit/q704IjkHSAYwuCfLuYnU?p=preview