Geek Answers Handbook

AngularUI Bootstrap Modal Public Event

I call the modal bootstrap dialog by reference.

I want to start a timer in an angular controller when a dialog box appears. How to detect dialog opening event in angular controller to start timer?

If I start a timer in an area 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.

+7
angularjs twitter-bootstrap
source share
4 answers
 alert($('#myModal').hasClass('in'));

It will return true if the modal function is open. You can check if the Modal window is open or not, then you can start the countdown.

-2
source share

Mark this one out.

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

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

+72
source share

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

If you look carefully, you will see that the component makes a promise that will be resolved when the dialog opens. This is what you will need to use. You can do something like this 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
source share

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

Unfortunately, open.then (func) works before freaking modal is actually in the DOM. Therefore, setInterval.

here is some non jQuery angular code.

0
source share

More articles:


All Articles