Angular UI anzeigen Modal eine Sekunde nach dem Öffnen

Question

In this plunk Ich habe eine Angular UI modal, die beim Öffnen für eine Sekunde ausgeblendet und dann angezeigt werden sollte. Ich benutze ng-show in der Vorlage selbst, aber das verbirgt den Inhalt, nicht das modale. Wie versteckt man das Modal? Beachten Sie, dass das Modal direkt nach console.log("opened") angezeigt wird, ohne auf console.log("displayed") zu warten.

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) 

      } 
     } 
    }); 

Answer 1

Versuchen Sie, diese

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) 

     } 
    } 
});