打开后一秒钟显示Angular UI模态

Question

在此plunk中，我有一个Angular UI模态，在打开时，应将其隐藏一秒钟，然后显示。我在模板本身中使用ng-show，但这隐藏了内容，而不是模态。如何隐藏模态？请注意，模态是在console.log("opened")之后立即显示的，而无需等待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)
            }
        }
    });

Answer 1

尝试此

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