AngularUI Bootstrap 模态打开事件答案

【问题标题】：AngularUI Bootstrap Modal Open eventAngularUI Bootstrap 模态打开事件
【发布时间】：2013-11-15 10:58:34
【问题描述】：

我正在通过链接调用引导模式对话框。

当对话框弹出时，我想在角度控制器中启动一个计时器。如何检测角度控制器中的对话框打开事件以启动计时器？

如果我在这样的范围内启动计时器，

app.controller('myctrl',
    ['$scope', '$window', '$timeout', 'svc',
    function ($scope, $window, $timeout,  svc) {

        $scope.countdown = 10;

        $scope.runCounter = function () {
            $scope.countdown -= 1;
            if ($scope.countdown > 0)
                $timeout($scope.runCounter, 60000);
       }
        $scope.runCounter();
    }]);

计时器在应用程序启动时启动。我希望计时器仅在对话框打开时启动。谢谢。

【问题讨论】：

标签： angularjs twitter-bootstrap

【解决方案1】：

签出this。

var modalInstance = $modal.open({...});
modalInstance.opened.then(function() {
    alert("OPENED!");
});

$modal.open() 返回一个对象，该对象除其他属性外还包含 opened 承诺，可按上述方式使用。

【讨论】：

这是正确答案，应该是公认的答案。 Ashish 上面的回答更像是一个 hack
没有打开怎么办？它会给出 'TypeError: Cannot read property 'opened' of undefined' 吗？你有解决方案吗？
如果模式可能无法打开，只需在该行前添加if( modalInstance )。
我想用它来关注模态中的元素，但看起来即使 opened 事件还不够晚，所以我通过设置 200 ms $timeout 来破解它开幕活动
如果您需要访问模式对话框中的 DOM，请使用 rendered 事件而不是 opened。

【解决方案2】：

我假设您正在使用来自http://angular-ui.github.io/bootstrap/ 的模态。

如果您仔细观察，您会发现该组件公开了一个承诺，该承诺将在打开对话框时得到解决。这是您需要使用的。您可以在创建模态的控制器中执行类似的操作：

$scope.runCounter = function () {
  $scope.countdown -= 1;
  if ($scope.countdown > 0)
    $timeout($scope.runCounter, 60000);
}

//Creating the dialog
var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: ModalInstanceCtrl
  }
});

//Add a function for when the dialog is opened
modalInstance.opened.then(function () {
  $scope.runCounter 
});

见工作 plunker here

【讨论】：

试过了。但是 $modal 没有打开对话框。不能从角度服务调用 $modal 吗？ $modal.open({ 模板: "
{{countdown}}
", 控制器: 'myctrl' });控制器已实例化，但对话框未打开。

【解决方案3】：

 var modalInstance = $modal.open({
                templateUrl: '../augustine_app/templates/program_purchase_popup.html',
                backdrop: 'static',
                controller: function ($scope, $modalInstance) {
                    $scope.cancel = function () {
                        $modalInstance.dismiss('cancel');
                    };
                }
            });

            

            if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
                modalInstance.opened.then(function () {
                    var modal;
                    var getModalInterval = function () {
                        modal = document.getElementsByClassName('modal')[0];
                        if (modal) {
                            clearInterval(getModal);
                            modal.style.marginTop = window.screenTop + 'px';
                            modal.style.height = 'auto';
                            modal.style.position = 'absolute';
                            modal.style.overflow = 'visible';
                        }
                    };
                    modal = document.getElementsByClassName('modal')[0];
                    if (!modal) {
                        var getModal = setInterval(getModalInterval, 2000);
                    }
                });
            }
        };

不幸的是，open.then(func) 在该死的模态实际上在 DOM 中之前运行。因此 setInterval。

这里是一些非 jQuery 角度代码。

【讨论】：

【解决方案4】：

就我而言，我需要能够检测模态控制器本身何时打开模态。

起初opened promise 已解决，即使模态尚未加载到 DOM 中。通过将调用包装在 $timeout 中，opened 承诺现在在模态加载到 DOM 后得到解决。

$modal.open({
  templateUrl: 'modalTemplate.html',
  controller: 'modalCtrl'
});

// inside modalCtrl
angular.controller('modalCtrl', ['$modalInstance', '$timeout', function($modalInstance, $timeout) {
  $timeout(function() {
    $modalInstance.opened.then(function() {
      //do work
    });
  });
}]);

【讨论】：