Le bouton de fermeture ne fonctionne pas dans l'interface utilisateur angulaire Modal

Question

Dans ce PLUNK j'ai une interface utilisateur angulaire et un bouton pour le fermer. Le bouton ne fonctionne pas car l'instance Modal n'a pas de méthode close.

Si vous supprimez l'instruction rendered, le bouton fonctionne. Pourquoi ça ne marche pas AVEC rendered?

Cela ne fonctionne pas:

var app = angular.module('app', ['ui.bootstrap']); 

app.controller('myCtl', function($scope,$uibModal) { 

     $scope.openModal = function() { 
      $scope.modalInstance = $uibModal.open({ 
       templateUrl: 'myModalContent.html', 
       scope: $scope 
      }).rendered.then(function() { 
       alert("modal rendered") 
      }); 
     }; 

     $scope.close = function() { 
      $scope.modalInstance.close(); 
     }; 

}) 

Ce FONCTIONNE (voir PLUNK):

var app = angular.module('app', ['ui.bootstrap']); 

app.controller('myCtl', function($scope,$uibModal) { 

     $scope.openModal = function() { 
      $scope.modalInstance = $uibModal.open({ 
       templateUrl: 'myModalContent.html', 
       scope: $scope 
      }); 
     }; 

     $scope.close = function() { 
      $scope.modalInstance.close(); 
     }; 

}) 

Answer 1

Dans le premier cas, vous assignez la rendered promesse de $scopemodalInstance, pas l'instance. Cela fonctionne si vous faites quelque chose comme (Plunk):

$scope.modalInstance = $uibModal.open({ 
    templateUrl: 'myModalContent.html', 
    scope: $scope 
}); 
$scope.modalInstance.rendered.then(function() { 
    alert("modal rendered") 
});