Ретрансляционная анимация при загрузке данных

Как я буду использовать fadein, эффект затухания при загрузке данных с помощью restangular. Как я узнаю о том, когда нужно угаснуть и когда исчезнуть

мой метод контроллера выглядит

$scope.fetchResult = function() {
 spinner_in();
 return api.items.search($scope.filterCriteria).then(function(data) { 
 $scope.products = data;
 $scope.totalPages = data.total;
 $scope.productsCount = data.TotalItems;

 }, function() {
 $scope.products = [];
 $scope.totalPages = 0;
 $scope.productsCount = 0;
 });
 };
1 ответ

Вот мое решение. Добавьте ответный перехватчик и перехватчик запросов, который отправляет широковещательную передачу корнеплодов. Затем создайте директиву для прослушивания этого ответа и запроса:

angular.module('mean.system')
 .factory('myRestangular',['Restangular','$rootScope', function(Restangular,$rootScope) {
 return Restangular.withConfig(function(RestangularConfigurer) {
 RestangularConfigurer.setBaseUrl('http://localhost:3000/api');
 RestangularConfigurer.addResponseInterceptor(function(data, operation, what, url, response, deferred) {
 var extractedData;
 // .. to look for getList operations
 if (operation === 'getList') {
 // .. and handle the data and meta data
 extractedData = data.data;
 extractedData.meta = data.meta;
 } else {
 extractedData = data.data;
 }
 $rootScope.$broadcast('apiResponse');
 return extractedData;
 });
 RestangularConfigurer.setRequestInterceptor(function (elem, operation) {
 if (operation === 'remove') {
 return null;
 }
 return (elem && angular.isObject(elem.data)) ? elem : {data: elem};
 });
 RestangularConfigurer.setRestangularFields({
 id: '_id'
 });
 RestangularConfigurer.addRequestInterceptor(function(element, operation, what, url) {
 $rootScope.$broadcast('apiRequest');
 return element;
 });
 });
 }]);

Вот директива:

angular.module('mean.system')
 .directive('smartLoadingIndicator', function($rootScope) {
 return {
 restrict: 'AE',
 template: '<div ng-show="isAPICalling"><p> Loading</p></div>',
 replace: true,
 link: function(scope, elem, attrs) {
 scope.isAPICalling = false;

 $rootScope.$on('apiRequest', function() {
 scope.isAPICalling = true;
 });
 $rootScope.$on('apiResponse', function() {
 scope.isAPICalling = false;
 });
 }
 };
 })
;

licensed under cc by-sa 3.0 with attribution.