AngularUI Bootstrap Modal Offenes Ereignis

Question

Ich rufe einen Bootstrap-Modaldialog über einen Link auf.

Ich möchte einen Timer im Winkelregler starten, wenn der Dialog erscheint. Wie kann ich das Öffnen des Dialogs im Winkelregler erkennen, um den Timer zu starten?

Wenn ich Timer im Umfang wie diese zu starten,

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

der Timer startet, wenn die Anwendung gestartet wird. Ich möchte, dass der Timer erst startet, wenn der Dialog geöffnet wird. Danke.

Answer 1

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

Es gibt true zurück, wenn modal geöffnet ist. Sie können prüfen, ob Modal-Fenster geöffnet ist oder nicht, dann kann u Ihr Countdown Ereignis starten ..

Answer 2

Überprüfen Sie this aus.

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

Die $modal.open() gibt ein Objekt, das neben anderen Eigenschaften enthält die opened Versprechen, um wie oben verwendet werden.

Answer 3

Ich nehme an, dass Sie Modale von http://angular-ui.github.io/bootstrap/ verwenden.

Wenn Sie genau hinsehen, werden Sie sehen, dass die Komponente ein Versprechen offen legt, das aufgelöst wird, wenn das Dialogfeld geöffnet wird. Welches ist es, was du benutzen musst? Sie können in der Steuerung so etwas tun, wo die modale erstellt:

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

Siehe Plunker Arbeits 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 die open.then (func) läuft, bevor der freaking modal tatsächlich in der DOM ist . Daher der setInterval.

hier ist einige nicht jQuery Winkelcode.