Angularjs 控制器无法从 cachefactory 服务加载 http 数据答案

【问题标题】：Angularjs controller fails to load http data from cachefactory serviceAngularjs 控制器无法从 cachefactory 服务加载 http 数据
【发布时间】：2016-04-29 04:51:46
【问题描述】：

新手到角度，使用服务我正在尝试加载缓存工厂并使用来自控制器的缓存。

这里是服务方法

codesApp.service('CodeFilterService',function($filter, $http, CacheService,$log){
this.getByCodeType = function (codeTypeValue, codeName) {
    if (angular.isUndefined(CacheService.get('Codes'))) {
        loadCodes();
    }
    return  $filter('filter')(CacheService.get('Codes'), {codetype: codeTypeValue, name: '!' + codeName});
};

this.getAllCodes = function () {
    $log.info("getAllCodes");
    if (angular.isUndefined(CacheService.get('Codes'))) {
        $log.info("Loading fresh getAllCodes");
        this.loadCodes();
    }
    return  CacheService.get('Codes');
};

this.loadCodes = function () {
    $http.get("./rest/codes").then(function (response) {
        $log.info("Codes Size" +response.data.length );
        CacheService.put('Codes', response.data);
    });
    };
});

codesApp.factory('CacheService',function($cacheFactory){
     return $cacheFactory('super-cache');
 });

控制器代码：

codesApp.controller('CodeCreateController',function($scope,$state,
 Code,CodeFilterService,$log){

  ... 
$scope.codeDropdownList = CodeFilterService.getAllCodes();
   $log.info("codeDropdownList = " + angular.isUndefined($scope.codeDropdownList))    ;

});

这里 angular.isUndefined($scope.codeDropdownList)) 返回 true，这意味着数据没有被加载。有什么办法可以解决这个问题。

【问题讨论】：

问题很简单... ajax 是异步的，所以你不能调用loadcodes() 并立即返回控制器。可能希望在控制器运行之前使用路由器中的解析来加载缓存
@charlietfl 谢谢，你能提供答案或psedocode

标签： angularjs angularjs-service angularjs-http

【解决方案1】：

你可以使用 Promise 注入 $q

codesApp.service('CodeFilterService', function ($filter, $http, CacheService, $log, $q) {

    this.getByCodeType = function (codeTypeValue, codeName) {
        if (angular.isUndefined(CacheService.get('Codes'))) {
            loadCodes();
        }
        return $filter('filter')(CacheService.get('Codes'), {
            codetype: codeTypeValue,
            name: '!' + codeName
        });
    };

    this.getAllCodes = function () {
        $log.info("getAllCodes");
        var deferred = $q.defer();
        if (angular.isUndefined(CacheService.get('Codes'))) {
            $log.info("Loading fresh getAllCodes");
            this.loadCodes().then(function (result) {
                $log.error('getAllCodes success');
                var cachedCodes = CacheService.get('Codes');
                deferred.resolve(cachedCodes);
            }, function (reason) {
                $log.error('getAllCodes error: ' + reason);
                deferred.reject();
            });
        } else {
            var cachedCodes = CacheService.get('Codes');
            deferred.resolve(cachedCodes);
        }
        return deferred.promise;
    };

    this.loadCodes = function () {
        $log.info("loadCodes");
        var deferred = $q.defer();
        $http.get("./rest/codes").then(function (response) {
            $log.error('loadCodes success');
            $log.info("Codes Size" + response.data.length);
            CacheService.put('Codes', response.data);
            deferred.resolve();
        }, function (reason) {
            $log.error('loadCodes error: ' + reason);
            deferred.reject();
        });
        return deferred.promise;
    };
});




codesApp.controller('CodeCreateController', function ($scope, $state,
    Code, CodeFilterService, $log) {

    ...
    CodeFilterService.getAllCodes().then(function (result) {
        $log.info('result: ' + result);
        $scope.codeDropdownList = result;
        $log.info("codeDropdownList = " + angular.isUndefined($scope.codeDropdownList))
    }, function (reason) {
        $log.error('error: ' + reason);
    });

});

【讨论】：