javascript - 打开后一秒显示 Angular UI 模态

Question

In this 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)

        }
    }
});