如何查看模式是否在Angular UI Bootstrap中打开 [英] How to see whether modal is open in Angular UI Bootstrap
问题描述
我正在使用Angular UI Bootstrap.如果模态是打开的,我想显示true
.如果未打开,我想显示false
.在HTML中有没有办法做到这一点?
I'm using Angular UI Bootstrap. If a modal is open, I'd like to display true
. If it's not open, I'd like to display false
. Is there a way to do this within the HTML?
我尝试使用以下代码,但这是错误的:
I tried using the following code, but it's wrong:
<code>myForm.$modalStack.opened={{myForm.$modalStack.opened}}</code>
是否有关于如何正确执行此操作的想法?
Any thoughts on how to do this correctly?
在我用来触发模式的相关代码下面:
Below the relevant code I'm using to trigger the modal:
HTML:
<button ng-click="myForm.agreement()">
控制器中的代码:
.controller('MyFormCtrl',
function ($location, $stateParams, $modal, $scope, $http) {
var myForm = this;
// . . .
myForm.agreement = agreement;
function agreement() {
$modal.open({
templateUrl: 'views/agreement.html'
})
});
推荐答案
$modal.open
返回的opened
属性是您可以加入的承诺.
The opened
property returned by $modal.open
is a promise you can hook into.
因此,以他们的示例为例,请参见此处- http://plnkr.co/edit/PsEqTIy8CDUU88HMLxbC?p =预览
So, using their example, see here - http://plnkr.co/edit/PsEqTIy8CDUU88HMLxbC?p=preview
$scope.modalOpen = false;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.opened.then(function () {
$scope.modalOpen = true;
});
// we want to update state whether the modal closed or was dismissed,
// so use finally to handle both resolved and rejected promises.
modalInstance.result.finally(function (selectedItem) {
$scope.modalOpen = false;
});
};
您想兑现承诺,然后做您需要的任何事情. .opened
是模式打开时的承诺,而.result
是模式关闭时的承诺.因此,按照这种想法,您可以使用$scope.modalOpen
作为布尔值.
You want to call the promises and then do whatever you need. .opened
is a promise for when the modal opens, and .result
is a promise for when the modal closes. So using this idea, you would use $scope.modalOpen
as your boolean.
这篇关于如何查看模式是否在Angular UI Bootstrap中打开的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!