[英]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);
});
};
}]);
好的,所以在我的modal-new-case.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步:添加close和ok函数
$scope.cancel = function () {
$modalInstance.dismiss();
};
和$ modalInstance.close(); 在
$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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.