如何从其他控制器关闭角度 UI 模式
How to close Angular-ui modal from other controller
我正在使用Angular-ui弹出一个带有表单的模态。我的代码是:
app.controller('NewCaseModalCtrl', ['$http', '$scope','$modal', function ($http, $scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'modal-new-case.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
});
};
}]);
然后我有另一个控制器在modal-new-case.html模板中,我希望它运行一个httpd请求,然后关闭该模态,这是代码:
app.controller('CreateCaseFormCtrl', ['$http','$scope', function($http,$scope) {
$scope.formData = {};
$scope.processForm = function() {
$http.post('http://api.com/proj', $scope.formData).
success(function(data, status, headers, config) {
console.log("success " + data.id);
}).
error(function(data, status, headers, config) {
console.log("Error " + status + data);
});
};
}]);
好的,在我的模态新案例.html模板中,当我这样做时会加载:
ng-controller="NewCaseModalCtrl"
我有这个 HTML:
<div ng-controller="CreateCaseFormCtrl">
<form ng-submit="processForm()">
<button class="btn btn-primary" ng-click="processForm()" >OK</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</form>
</div>
所以如果你看到,我真正想做的是运行那个 processForm() 函数,当它成功返回时,我想调用将关闭模态的函数,我相信"cancel()"会很好。
但是我不知道如何从CreateCaseFormCtrl控制器引用它。
我感谢任何想法和帮助,我想补充一点,当涉及到 Angular 时,我非常不复杂,所以如果这很复杂,请记住,也许我不是 100% 清楚 Angular 中的每件事,例如工厂等。我想我是说我对一个相当简单的肮脏解决方案非常满意,因为这不会是长期的生产编程代码。
第 1 步:删除
ng-controller="CreateCaseFormCtrl"
从
<div ng-controller="CreateCaseFormCtrl">
<form ng-submit="processForm()">
<button class="btn btn-primary" ng-click="processForm()" >OK</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</form>
</div>
第 2 步:更改
controller: 'ModalInstanceCtrl', => controller: 'CreateCaseFormCtrl'
在
var modalInstance = $modal.open({
templateUrl: 'modal-new-case.html',
controller: 'CreateCaseFormCtrl', //Add here
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
步骤3:在CreateCaseFormCtrl中添加一个名为$modalInstance的服务
app.controller('CreateCaseFormCtrl', ['$http','$scope', '$modalInstance', function($http,$scope, $modalInstance) {
步骤 4:添加关闭和确定函数
$scope.cancel = function () {
$modalInstance.dismiss();
};
和 $modalInstance.close(); in
$http.post('http://api.com/proj', $scope.formData).
success(function(data, status, headers, config) {
console.log("success " + data.id);
$modalInstance.close(); //add here
}).
error(function(data, status, headers, config) {
console.log("Error " + status + data);
});
使用 $modalInstance.dismiss API
在NewCaseModalCtrl中:
controller('NewCaseModalCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance,
...
$modalInstance.close(data);
您可以像这样全局地执行此操作,也可以从其他控制器执行此操作:
//hide any open $mdDialog modals
angular.element('.modal-dialog').hide();
//hide any open bootstrap modals
angular.element('.inmodal').hide();
//hide any sweet alert modals
angular.element('.sweet-alert').hide();
相关文章:
- jQuery UI模式对话框覆盖淡出
- 延迟角度 UI 模式关闭
- 角度 UI 模式开机自检
- 如何在不创建数组的情况下使用NgFor来生成矩阵UI模式
- jquery ui模式框中的表单隐藏后,键盘将不再被调用
- 语义 UI 模式未定义
- 将 UI 模式对话框添加到新的 DIV 标记
- jQuery UI 模式对话框在关闭之前挂起
- j查询 UI 模式对话框在叠加单击时全局关闭
- 加载时的引导角度 UI 模式
- 语义 UI 模式未打开
- 如何从其他控制器关闭角度 UI 模式
- 无法将 $_GET 回显到 JQUERY UI 模式对话框中
- 使用 jQuery UI 模式表单永久更改 HTML 文本
- Jquery UI 模式匿名函数回调以打开对话框
- 将变量传递到角度 UI 模式
- 如何在位置更改时显示角度 UI 模式
- 关闭事件后的角度 UI 模式
- jQuery UI 模式对话框:在错误的位置关闭图标并调整其大小
- 默认情况下,Jquery UI 模式(弹出框)控件大小和隐藏