AngularJs关闭模态

时间:2015-08-04 03:00:31

标签: angularjs angular-ui-bootstrap

我想创建关闭模态的函数。我试试这样的事情。

打开模态的代码

$scope.showPreloader = function() {
        $scope.$modalInstance = $modal.open({
            animation: false,
            templateUrl: preloaderTemplate,
            size: 'sm',
            windowClass: 'preloader',
        })
    };

隐藏模态

$scope.hidePreloader = function() {
      $scope.$modalInstance.dismiss('cancel');
    };

模态只打开而不是关闭它。我像这样跑他们。

 $scope.simulateLoader = function(message) {
          var runIns = $scope.showPreloader();
          setTimeout(function () {
                $scope.hidePreloader();
            }, 2000);
        }

关闭功能无效。

编辑:我认为关闭功能已运行。它只是不删除模态。我把背景设置为假。在此期间,背景无法点击。

2 个答案:

答案 0 :(得分:0)

使用Angular p代替$timeout,因为window.setTimeout会调用$timeout来触发$scope.$apply并更新视图:

$digest

请记住在声明控制器时注入$timeout(function () { $scope.hidePreloader(); }, 2000); ,请说:

$timeout

答案 1 :(得分:0)

试试这样:

    $scope.showPreloader = function() {
            $scope.$modalInstance = $modal.open({
                animation: false,
                templateUrl: preloaderTemplate,
                size: 'sm',
                windowClass: 'preloader',
                scope: $scope,
                controller: ['$scope','$modalInstance', function ($scope, $modalInstance) {
                          $scope.hidePreloader = function () {
                            $modalInstance.dismiss('cancel');
                          };
                  }
            })
        };

然后调用您的$scope.hidePreloader方法来关闭模态弹出窗口