Schließen Sie die Schaltfläche funktioniert nicht in eckigen UI Modal

Question

In diesem PLUNK habe ich ein Angular UI Modal und eine Schaltfläche, um es zu schließen. Die Schaltfläche funktioniert nicht, da die Modal-Instanz keine Methode close hat.

Wenn Sie die rendered Anweisung entfernen, funktioniert die Schaltfläche. Warum funktioniert es nicht MIT rendered?

funktioniert das nicht:

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

}) 

Diese (siehe PLUNK) funktioniert:

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

Im ersten Fall werden die Zuweisung Sie die rendered Versprechen $scopemodalInstance, nicht der Fall. Es funktioniert, wenn Sie etwas tun wie (Plunk):

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