![](/img/trans.png)
[英]How to close modal with a “Cancel” button with angular js and Bootstrap
[英]bootstrap modal not close angular js
我正在使用带有 angular js 的 UI 引导模式对话框。 模态加载成功。 但是,当我单击 YES/NO 按钮时,发出发生并且模态没有关闭。
错误说,'$uibModal.close 不是一个函数'。
.directive('confirm', function(ConfirmService) {
return {
restrict: 'A',
scope: {
eventHandler: '&ngClick'
},
link: function(scope, element, attrs){
element.unbind("click");
element.bind("click", function(e) {
ConfirmService.open(attrs.confirm, scope.eventHandler);
});
}
}
})
这是我的服务
.service('ConfirmService', function($uibModal) {
var service = {};
service.open = function (text, onOk) {
var modalInstance = $uibModal.open({
templateUrl: 'modules/confirmation-box/confirmation-box.html',
controller: 'userListCtrl',
resolve: {
text: function () {
return text;
}
}
});
modalInstance.result.then(function (selectedItem) {
onOk();
}, function () {
});
};
return service;
})
这是我的控制器文件。 我正在尝试控制器内的是/否按钮
.controller('userListCtrl',
['$scope','$http','appConfig','$uibModalInstance', '$uibModal','$log','alertService',
function ($scope,$http, appConfig,$uibModalInstance, $uibModal,$log,alertService) {
$scope.ok = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}]);
您正在尝试同时使用两种使用方法。 有两个(可能更多)您可以使用 $uibModal,但我相信您正在混合使用以下两个:
1)服务控制模式并返回一个承诺,我相信这就是我认为你在做什么。 在这种情况下,您不需要手动调用 close/dismiss。 您可以进行以下更改:
service.open = function(text, onOK) {
var modalInstance = $uibModal.open({
templateUrl: 'modules/confirmation-box/confirmation-box.html',
controller: 'userListCtrl',
resolve: {
text: function () {
return text;
}
}
});
// Return so you can chain .then just in case. Generally we don't even
// do this, we just return the instance itself and allow the controller to
// decide how to handle results/rejections
return modalInstance.result;
}
在您的模板文件中,您将拥有以下内容:
<button type="button" ng-click="$close(selectedItem)"></button>
<button type="button" ng-click="$dismiss(readon)"></button>
2)如果想直接使用close方法,那么只需要把service改成:
...
return $uibModal.open({});
然后在您的控制器中:
var modal = service.open('confirm');
modal.result.then(...)
modal.close()
编辑- 更新为 op 以根据 georgeawg 建议删除反模式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.