CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrapangular-ui
ps0604
ps0604

Reputation: 1071

Show Angular UI Modal one second after opened

In this plunk I have an Angular UI modal that, when opened, it should be hidden for one second and then displayed. I use ng-show in the template itself, but that hides the contents, not the modal. How to hide the modal? Note that the modal is displayed right after console.log("opened") without waiting for console.log("displayed").

Javascript:

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function () {});

app.directive("theModal", function($uibModal,$timeout) {
          return {
            restrict: "AE",        
            link: function (scope, element, attrs) {

                    scope.show = false;
                    console.log("opened");
                    scope.instance = $uibModal.open({
                        windowClass: 'app-modal',
                        template: '<div ng-show="show">MODAL WAS LOADED</div>'
                    });

                    $timeout(function(){
                      scope.show = true;
                      console.log("displayed");
                    },1000)

            }
        }
    });

Upvotes: 0

Views: 353

Answers (1)

Amal
Amal

Reputation: 278

Try this

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function () {});

app.directive("theModal", function($uibModal,$timeout) {
      return {
        restrict: "AE",        
        link: function (scope, element, attrs) {

                console.log("opened");

                $timeout(function(){
                  scope.instance = $uibModal.open({
                    windowClass: 'app-modal',
                    template: '<div >MODAL WAS LOADED</div>'
                  });
                  console.log("displayed");
                },1000)

        }
    }
});

Upvotes: 2

Related Questions