Question

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

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

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

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

检查this。

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

$modal.open()返回一个对象，该对象包含opened承诺，其中包含{{1}}承诺，如上所述。

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 here

Answer 3

＆＃13;

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

＆＃13;

不幸的是open.then（func）在怪异的模态实际上在DOM之前运行。因此setInterval。

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

Answer 4

对于我来说，我需要能够检测何时在模态控制器本身内部打开了模态。

起初，opened承诺已经解决，即使该模式尚未加载到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
    });
  });
}]);

Angular UI Bootstrap Modal Open事件

4 个答案: