angularjs - AngularUI Bootstrap 模态打开事件

Question

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

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

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

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();
    }]);

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

Answer 1

看看这个。

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

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

Answer 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

Answer 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 角度代码。

Answer 4

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

起初opened，即使模态尚未加载到 DOM 中，promise 也已解决。通过将调用包装在 a$timeout中，opened现在可以在模式加载到 DOM 后解析 promise。

$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
    });
  });
}]);