web-dev-qa-db-fra.com

Angular UI Bootstrap Modal Open événement

J'appelle un dialogue modal bootstrap via un lien.

Je souhaite démarrer une minuterie dans le contrôleur angulaire lorsque la boîte de dialogue s'ouvre. Comment détecter l'événement d'ouverture de dialogue dans le contrôleur angulaire pour démarrer le chronomètre?

Si je lance la minuterie dans le champ comme celui-ci, 

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

la minuterie démarre lorsque l'application démarre. Je veux que la minuterie ne démarre que lorsque la boîte de dialogue s'ouvre. Merci.

angularjstwitter-bootstrap
8
user2793135

Vérifiez this out.

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

La $modal.open() renvoie un objet qui, parmi d'autres propriétés, contient la promesse opened, à utiliser comme ci-dessus.

77
Nikos Paraskevopoulos

Je suppose que vous utilisez les modaux de http://angular-ui.github.io/bootstrap/ . 

Si vous regardez de plus près, vous verrez que le composant expose une promesse qui sera résolue à l'ouverture de la boîte de dialogue. Quel est ce que vous aurez besoin d'utiliser. Vous pouvez faire quelque chose comme ça dans le contrôleur où le modal est créé:

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

Voir plunker de travail ici

4
Nicolas ABRIC

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

Malheureusement, open.then (func) s'exécute avant que le modal flippant soit réellement dans le DOM. D'où setInterval.

voici un code angulaire non jQuery. 

0
Aleksandr Gembinski