如何在 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=preview

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;
    });
};

你想调用 Promise，然后做任何你需要的事情..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屋！