如何在 Angular 模态 window ($uibModalInstance) 打开后 运行 编码？

Question

我需要在模态 window 中响应某些事件。

以此CodePen为底。 假设一个（演示）需要在单击模态 window 中的 所有标签 时提醒标签内容：

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

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

Answer 1

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

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

你可以看到它 returns 0。所以，你只需要等到模板加载的那一刻。 Angular 中有一个常用技巧，在这种情况下会有所帮助：将您的代码放在 $timeout 服务中，如下所示：

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

Timeout 会将代码放在当前执行管道的最末端，此时弹出模板将位于 DOM.

但这当然是一个肮脏的 hack:) 更多 Angular 方法，如果您需要编写一些 jQuery 代码，是编写一个单独的指令并将其应用于相应的元素在你的模板中。并且不要忘记种类繁多的本机指令，例如 "ng-click" 等

Answer 2

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