[英]Angular Modal - closing/dismissing modal
I am new to Angular and trying to implement a modal. 我是Angular的新手,并试图实现一个模态。 Having problem closing/dismissing the modal - when I click the cancel button, nothing happens. 关闭/解除模态时遇到问题 - 当我单击取消按钮时,没有任何反应。 Here is the 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');
};
})
and here is the template view of the actual 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">×</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>
Even clicking the cross on the top right of modal doesn't close the modal. 即使单击模态右上角的十字也不会关闭模态。 Any ideas? 有任何想法吗? Thanks:) 谢谢:)
Should it not be ng-click="cancel()" instead of ngclick ? 是不是ng-click =“cancel()”而不是ngclick ?
Also I don't think the scope is bound to the controller, I haven't tested this but I believe you need some more options: 另外我不认为范围是绑定到控制器,我没有测试过这个,但我相信你需要更多的选择:
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl',
controllerAs: '$mCtrl',
bindToController: true
});
And then just update your template: 然后只需更新您的模板:
ng-click="$mCtrl.cancel()"
Have you tried $uibModalInstance.close()? 你试过$ uibModalInstance.close()吗?
Another thing you can do is 你可以做的另一件事是
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl'
});
modalInstance.result.then(function successCallBack() {
modalInstance.close()
}, function errorCallBack() {
modalInstance.close()
})
};`
If you want to close the model , on click of the cross bar then , you can use 如果要关闭模型,单击横杆然后,即可使用
<button type="button" class="close" data-dismiss="modal">×</button>
This will be button , and data-dismiss="modal"
will close your modal. 这将是按钮, data-dismiss="modal"
将关闭你的模态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.