Angular Modal - Schließen/Verwerfen Modal

Question

Ich bin neu in Angular und versuchen, ein Modal zu implementieren. Problem beim Schließen/Verwerfen des Modales - wenn ich auf Abbrechen klicke, passiert nichts. Hier ist der Controller-Code:

angular.module('navApp') 
// Passing the $modal to controller as dependency 
.controller('HomeCtrl', ['$scope', '$uibModal', function 
($scope, $uibModal) { 
$scope.title = "Hello, Angm-Generator!"; 
$scope.open = function() { 
var modalInstance = $uibModal.open({ 
templateUrl: 'myModalContent.html', 
controller: 'ModalCtrl' 
}); 
}; 
}]) 

.controller('ModalCtrl', function ($scope, $uibModalInstance) { 
// Added some content to Modal using $scope 
$scope.content = "ModalCtrl, Yeah!" 
// Add cancel button 
$scope.cancel = function() { 
$uibModalInstance.dismiss('cancel'); 
}; 
}) 

und hier ist die Vorlage Blick auf die tatsächlichen modal

<!-- Modal Script --> 
<script type="text/ng-template" id="myModalContent.html"> 
<div class="modal-header"> 
<button type="button" class="close" datadismiss=" 
modal" aria-hidden="true">&times;</button> 
<h3 class="modal-title">Hello from Modal!</h3> 
</div> 
<div class="modal-body"> 
Modal Content from: <b>{{ content }}</b> 
</div> 
<div class="modal-footer"> 
<button class="btn btn-danger" ngclick=" 
cancel()">Cancel</button> 
</div> 
</script> 
</div> 

Auch das Kreuz rechts oben modal klicken nicht die modale schließen. Irgendwelche Ideen? Danke :)

Answer 1

Sollte nicht ng-click = "cancel()" anstelle von ngclick sein?

Außerdem glaube ich, nicht der Umfang an den Controller gebunden ist, ich habe nicht getestet, aber ich glaube, dass Sie ein paar mehr Optionen benötigen:

var modalInstance = $uibModal.open({ 
    templateUrl: 'myModalContent.html', 
    controller: 'ModalCtrl', 
    controllerAs: '$mCtrl', 
    bindToController: true 
}); 

Und dann einfach Ihre Vorlage aktualisieren:

ng-click="$mCtrl.cancel()" 

Answer 2

Wenn Sie das Modell schließen möchten, auf Klick auf die Querstange dann können Sie

<button type="button" class="close" data-dismiss="modal">&times;</button> 

Dies wird verwenden Schaltfläche sein, und data-dismiss="modal" wird Ihr Modal schließen.