AngularUI Bootstrap Modal Otwórz wydarzenie

Question

Wywołuję modalne okno dialogowe ładowania początkowego za pośrednictwem łącza.

Chcę uruchomić zegar w regulatorze kątowym, gdy pojawi się okno dialogowe. Jak wykryć zdarzenie otwarcia okna dialogowego w regulatorze kątowym, aby uruchomić zegar?

Jeśli zacznę czasowy w zakresie jak to,

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

rozpoczęciem czasowych podczas uruchamiania aplikacji. Chcę, aby timer uruchamiał się dopiero po otwarciu okna dialogowego. Dzięki.

Answer 1

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

pracy będzie return true jeśli modalna jest otwarta. Można sprawdzić, czy okno modalne jest otwarty czy nie, to u może rozpocząć imprezę odliczania ..

Answer 2

Sprawdzić this na zewnątrz.

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

$modal.open() zwraca obiekt, który, między innymi właściwości zawiera obietnicę opened, który ma być używany jak powyżej.

Answer 3

Zakładam, że używasz modałów z http://angular-ui.github.io/bootstrap/.

Jeśli przyjrzysz się uważnie, zobaczysz, że komponent odsłania obietnicę, która zostanie rozwiązana po otwarciu okna dialogowego. Właśnie tego będziesz potrzebować. Można zrobić coś takiego w kontrolerze, gdzie tworzony jest modalne:

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

Zobacz plunker here

Answer 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 open.then (func) biegnie przed niecodzienna modalna jest rzeczywiście w DOM . Stąd setInterval.

tutaj jest jakiś nie kątowy kod jQuery.