在AngularJS UI中关闭模态 [英] Closing A Modal in AngularJS UI
问题描述
AngularJS(和AngularJS UI)相当新,我无法关闭模式窗口.
Quite new with AngularJS (and AngularJS UI) and I am unable to close a modal window.
HTML代码如下:
<div>
<div data-ng-show="agencies || agencies.length > 0">
<div>
<h3>
Agencies
</h3>
</div>
<div>
<a href="" data-ng-click="showModalAddAgency()"><span class="glyphicon glyphicon-cloud-upload"></span> Add</a>
</div>
</div>
</div>
控制器:
'use strict';
app.controller('agencyController', function ($scope, $modal, agenciesDataService) {
$scope.agencies = [];
$scope.agency = null;
init();
function init() {
getAgencies();
};
function getAgencies() {
var onResponse = function (results) {
$scope.agencies = results.data;
};
var onError = function (error) {
alert(error.message);
};
agenciesDataService.getAgencies()
.then(onResponse, onError);
};
$scope.showModalAddAgency = function () {
var modalInstance = $modal.open({
templateUrl: 'app/views/agencydetail.html',
controller: 'agencyController',
backdrop: 'static'
});
};
$scope.addAgency = function addAgency() {
var currentAgency = this.agency;
var onResponse = function (results) {
currentAgency.Id = results.data.Id;
currentAgency.Name = results.data.Name;
currentAgency.AgencyPortalAccountId = results.data.AgencyPortalAccountId;
$scope.agencies.push(currentAgency);
currentAgency = {};
// HOW TO CLOSE THE MODAL FROM HERE? WHAT FUNCTION DO I CALL?
};
var onError = function (error) {
//alert(error.message);
}
agenciesDataService.addAgency(currentAgency)
.then(onResponse, onError);
};
});
几乎,发出POST请求后,我想关闭模式窗口,但是我不知道如何.不知道如何引用打开的模式窗口.
Pretty much, after making the POST request, I want to close the modal window, but I don't have any idea how. Not sure how I can reference the modal window which I opened.
任何见识表示赞赏.
更新: 我的模式的html包含一个保存"和取消"按钮.
Update: My modal's html includes an Save and Cancel button.
<div class="modal-footer">
<button class="btn btn-primary normal-button"
ng-click="addAgency()">Save</button>
<button class="btn btn-warning" ng-click="$dismiss()" style="width:100px;">Cancel</button>
</div>
当我按下取消"按钮时,模态不会关闭.我要实现的是能够在addAgency函数完成时关闭模式.
The modal does close when I hit the Cancel button. What I want to achieve is being able to close the modal when the addAgency function is completed.
推荐答案
您需要将模式实例保存在$ scope中,以便以后引用它.
You need to save your modal instance in the $scope so that you have a reference to it later.
所以您要在顶部初始化$scope.modalInstance = null;
.
So you'd init your $scope.modalInstance = null;
at the top.
然后,您将像这样打开模态:
Then you'd open your modal like this:
$scope.modalInstance = $modal.open({
templateUrl: 'app/views/agencydetail.html',
controller: 'agencyController',
backdrop: 'static'
});
要关闭,请先致电$scope.modalInstance.close();
(它将在您有// HOW TO CLOSE THE MODAL FROM HERE? WHAT FUNCTION DO I CALL?
注释的位置.
To close, you would then call $scope.modalInstance.close();
(which would go where you have your // HOW TO CLOSE THE MODAL FROM HERE? WHAT FUNCTION DO I CALL?
comment.
下面是一个显示如何执行此操作的插件: 示例
Here's a plunkr that shows how to do it: EXAMPLE
这篇关于在AngularJS UI中关闭模态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!