数据加载时的角动画答案

【问题标题】：restangular animation on data load数据加载时的角动画
【发布时间】：2014-07-01 13:57:00
【问题描述】：

我将如何使用淡入淡出效果对带有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;
            });
        };

【问题讨论】：

标签： angularjs jquery-animate fadein fadeout

【解决方案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><i class="fa fa-gear fa-4x fa-spin"></i>&nbsp;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;
        });
      }
    };
  })
;

【讨论】：