Проверить, когда фильтр сделан, угловой

У меня есть фильтр с большим количеством логики в сочетании с большим количеством данных. Это займет несколько секунд, пока это не будет сделано. Я хочу показать символ загрузки, который указывает, что фильтр работает.Проверить, когда фильтр сделан, угловой

Я попытался это:

У меня есть нг-шоу на мой символ загрузки в моей разметке. Я включаю свойство в начале в моем фильтре и затем выключаю его в конце.

Это не работает. Свойство никогда не будет установлено в 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; 
});

Markup

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

источник

2015-03-29 Per

фильтров являются синхронными функциями, то есть вы не можете обновить область в начале и в конце функции фильтра, потому что дайджеста не будет работать до тех пор, пока не выйдет из фильтра. К сожалению, вы также не можете вернуть обещание. Вместо использования фильтра выполняйте тяжелый подъем в контроллере (или, еще лучше, службу), и когда данные готовы, установите его в область видимости. –

фильтры работают очень часто, я не думаю, что это хорошая идея запустить фильтр, который занимает несколько секунд (и замораживание ui) – eladcon

@YairTavor Итак, если я просто скопирую код в службу вместо этого и использую тот же подход с настройкой загрузки значение в начале и конце функции будет работать? – Per

фильтры являются синхронными функциями, то есть вы не можете обновить область в начале и в конце функции фильтра, потому что дайджест будут не запускайте до выхода из фильтра. К сожалению, вы также не можете вернуть обещание. Вместо того чтобы использовать фильтр, делать тяжелую работу в контроллере (или еще лучше, услугу), и когда данные готовы набор его рамки:

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>

Вот plunker: http://plnkr.co/edit/TcQtY8e6phLTQ4oZcHPn?p=preview

источник

2015-03-29 14:18:19

Проверить, когда фильтр сделан, угловой

ответ

Смежные вопросы