如何在Angular模态窗口($ uibModalInstance)打开后运行代码?

时间:2018-01-30 15:05:27

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

我需要在模态窗口中的某些事件中做出回应。

以此CodePen为基础。 假设(演示)需要在点击模态窗口中的所有标签时提醒标签内容:

enter image description here

我在模态控制器中的代码无效

angular.module('ui.bootstrap.demo')
  .controller('ModalInstanceCtrl',
              function ($scope, $uibModalInstance) {
  $('label').click(function(e){
    console.log(e);
  });

2 个答案:

答案 0 :(得分:1)

您的代码没有任何效果,因为在执行时,模板还不是DOM的一部分。如果你将这行代码放在控制器中:

console.log($('label').length);

你可以看到它返回0.所以,你需要的只是等到模板加载的那一刻。 Angular中有一个常见的技巧,在这种情况下会有所帮助:将代码放在$ timeout服务中,如下所示:

$timeout(function() {
  $('label').on('click', function(e){
    console.log(e);
  });
});

Timeout会将代码放在当前执行管道的最后,此时弹出模板将位于DOM中。

但这当然是一个肮脏的黑客:)更多Angular方式,如果你需要编写一些jQuery代码,是编写一个单独的指令并将其应用于模板中的相应元素。并且不要忘记各种各样的原生指令,例如“ng-click”等。

答案 1 :(得分:1)

$uibModalInstance.rendered.then(function(){
  // run your code here and you are fine.
});