Ken Ken - 6 months ago 15
AngularJS Question

How to see whether modal is open in Angular UI Bootstrap

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()">


Code in Controller:

.controller('MyFormCtrl',
function ($location, $stateParams, $modal, $scope, $http) {
var myForm = this;
// . . .

myForm.agreement = agreement;

function agreement() {

$modal.open({

templateUrl: 'views/agreement.html'
})
});

Answer

.opened is not a property its a promise you can hook onto from $modal.open

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

    modalInstance.result.then(function (selectedItem) {
        $scope.modalOpen = false;
    }, function () {
        $scope.modalOpen = false;
    });
};

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.