Question

我有一个过滤器，其中包含大量逻辑和大量数据。它需要几秒钟才能完成。我想显示一个加载符号，表明过滤器正在运行。

我试过了：

我在我的标记中加载了符号。我在过滤器的开头打开属性，然后在最后关闭它。

它不起作用。该属性永远不会设置为true。有没有更好的方法呢？

angular.module('clientApp')
  .filter('matchPositions', function ($filter, CommonFactory) {
    return function (actions, firstLevels, secondLevels, objectTypes, searchText) {
      var filtered = [];

      CommonFactory.filterLoading = true;

      //logic here

      CommonFactory.filterLoading = false;
      return filtered;
    };
  });

控制器：

angular.module('clientApp')
  .controller('ActionStateCtrl', function($scope, CommonFactory){
    $scope.filterLoading = CommonFactory.filterLoading;
});

标记

<i ng-show="filterLoading" class="fa fa-spinner fa-spin"></i>

Answer 1

过滤器是同步函数，这意味着您无法在过滤器函数的开头和结尾更新范围，因为在您退出过滤器之前，摘要不会运行。不幸的是，你也无法回复承诺。而不是使用过滤器，在控制器中执行繁重的工作（或者更好的是服务），并且在数据准备就绪时将其设置为范围：

app.service('myService', function($q, $timeout){
    return {
        // this function is async and heavy
        getData : = function(){
            var deferred = $q.defer();

            $timeout(function(){ deferred.resolve('Result Here!'); }, 5000);

            return deferred.promise;
        }
    };
});

app.controller('myCtrl', function($scope, myService){
    $scope.loading = true;

   myService.getData().then(function(results){
         $scope.showThisData = results;
         $scope.loading = false;
   });
});

然后你可以用你的html

<div ng-if="!loading"> {{ showThisData }} </div>
<div ng-if="loading"> Loading, please wait... </div>

这是一个掠夺者：http://plnkr.co/edit/TcQtY8e6phLTQ4oZcHPn?p=preview

检查过滤器何时完成，有角度

1 个答案: