AngularJs 关闭模式

Question

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

打开模式的代码

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

关闭功能无效。

编辑：我认为关闭函数是运行。它只是不删除模态。我将背景设置为 false 。超时期间无法点击背景。

Answer 1

使用Angular $timeout代替window.setTimeout，因为$timeout会调用$scope.$apply触发$digest并更新视图：

$timeout(function () {
    $scope.hidePreloader();
}, 2000);

记得在声明controller的时候注入$timeout，说：

app.controller('MyCtrl', ['$scope', '$timeout', function ($scope, $timeout)...

Answer 2

这样试试：

    $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 方法关闭模态弹出窗口

AngularJs 关闭模式

AngularJs close modal

angularjs

angular-ui-bootstrap