AngularUI Bootstrap Modal Open event

问题:

I'm invoking a bootstrap modal dialog through a link.

I want to start a timer in the angular controller when the dialog pops up. How do I detect the dialog open event in the angular controller to start the timer?

If I start timer in the scope like this,

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

the timer starts when the application starts. I want the timer to start only when the dialog opens. Thanks.

回答1:

alert($('#myModal').hasClass('in')); 

It will return true if modal is open. You can check whether Modal window is open or not then u can start your countdown event..

回答2:

Check this out.

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

The $modal.open() returns an object that, among other properties contains the opened promise, to be used as above.

回答3:

I assume that you are using modals from http://angular-ui.github.io/bootstrap/.

If you look closely you will see that the component expose a promise that will be resolved when the dialog is opened. Which is what you will need to use. You can do something like that in the controller where the modal is created:

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

See working plunker here

回答4:

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

Unfortunatly the open.then(func) runs before the freaking modal is actually in the DOM. Hence the setInterval.

here is some non jQuery angular code.

文章来源: AngularUI Bootstrap Modal Open event