初始化AngularJS服务的工厂风格

我有一个通过REST检索数据的服务。我想将结果数据存储在服务级别变量中，以便在多个控制器中使用。当我将所有REST逻辑直接放入控制器时，一切正常，但当我尝试将数据的检索/存储移动到服务中时，控制器在数据恢复时不会更新。我已经尝试了很多不同的方式来维护服务和控制器之间的绑定。初始化AngularJS服务的工厂风格

控制器：

myApp.controller('SiteConfigCtrl', ['$scope', '$rootScope', '$route', 'SiteConfigService', 
function ($scope, $rootScope, $route, SiteConfigService) { 

    $scope.init = function() { 
     console.log("SiteConfigCtrl init"); 
     $scope.site = SiteConfigService.getConfig(); 
    } 

} 

]);

服务：

myApp.factory('SiteConfigService', ['$http', '$rootScope', '$timeout', 'RESTService', 
function ($http, $rootScope, $timeout, RESTService) { 

    var siteConfig = {} ; 

    RESTService.get("https://domain/incentiveconfig", function(data) { 
     siteConfig = data; 
    }); 

    return { 

     getConfig:function() { 
      console.debug("SiteConfigService getConfig:"); 
      console.debug(siteConfig); 

      return siteConfig; 
     } 

    }; 
} 
]);

查看：

<div class="span4" ng-controller="SiteConfigCtrl"> 
      <header> 
       <h2> 
        {{site.title}} 
       </h2> 
      </header>

来源

2013-10-28 wisemanIV

可能是因为您的服务已返回你的承诺，你必须在你的控制器使用“那么”功能？详情请看这里。 http://johnmunsch.com/2013/07/17/angularjs-services-and-promises/ – javaCity

我想这就是问题所在。当服务异步检索其数据时，如何动态地将控制器绑定到服务？我也只想进行一次REST调用，并在检索后使用会话的本地副本。 – wisemanIV

我会把它与厂家的承诺写：

myApp.factory('SiteConfigService', ['$http', '$rootScope', '$timeout', 'RESTService', '$q' 
function ($http, $rootScope, $timeout, RESTService, $q) { 

    var siteConfig = {} ; 

    RESTService.get("https://domain/incentiveconfig", function(data) { 
     siteConfig = data; 
    }); 

    // or just 
    // var siteConfig = RESTService.get("https://domain/incentiveconfig"); 

    return { 

     getConfig:function() { 
      var deferred = $q.defer(); 
      deferred.resolve(siteConfig); 

       return deferred.promise;  
     } 

    }; 
} 
]);

的jsfiddle - -

控制器侧

  SiteConfigService.getConfig() 
        .then(function (result) { 
         $scope.site = result;       
        }, function (result) { 
         alert("Error: No data returned"); 
        });

来源

2013-10-28 22:17:06

我没有小提琴/笨蛋，但希望这个例子可以帮助你：http://jsfiddle.net/9Ymvt/674/ –

我有这个工作。我不得不对上面的代码进行修改。我会在一段时间后发布完整答案。 – wisemanIV

基于Maxim的回答上述溶液http://jsfiddle.net/acb98sm/2pQ6A/6/

var myApp = angular.module('myApp',[]); 

myApp.controller('SiteConfigCtrl', ['$scope', '$rootScope', '$route', 'SiteConfigService', 
function ($scope, $rootScope, $route, SiteConfigService) { 

    SiteConfigService.getConfig() 
      .then(function (result) { 
       console.log("results are in "); 
       console.log(result); 
       $scope.site = result.data; 

      }, function (result) { 
       alert("Error: No data returned"); 
      }); 

} 

]); 

myApp.factory('SiteConfigService', ['$http', '$rootScope', '$timeout', 'RESTService', '$q', 
function ($http, $rootScope, $timeout, RESTService, $q) { 

var siteConfigFn = RESTService.get("http://graph.facebook.com/616366118/", function(data) { 
    console.log("SiteConfigService returns"); 
}); 

return { 

    getConfig:function() { 
     var deferred = $q.defer(); 
     deferred.resolve(siteConfigFn); 

      return deferred.promise;  
    } 

}; 
} 
]); 

myApp.$inject = ['$scope', 'SiteConfigService', 'RESTService']; 

myApp.factory('RESTService', 
function ($http) { 
    return { 
     get:function (url, callback) { 
      return $http.get(url, {withCredentials:false}). 
       success(function (data, status, headers, config) { 
        callback(data); 
       }). 
       error(function (data, status, headers, config) { 
        console.log("failed to retrieve data"); 
       }); 
     }, 
     post:function (url, data, callback) { 
      return $http.post(url, data, {withCredentials:true}). 
       success(function (data, status, headers, config) { 
        callback(data); 
       }). 
       error(function (data, status, headers, config) { 
        console.log("failed to retrieve data"); 
       }); 
     } 
    }; 
    } 
);

来源

2013-10-28 23:29:03 wisemanIV

初始化AngularJS服务的工厂风格

回答

相关问题