AngularJS:使用共享服务(使用$ resource)在控制器之间共享数据,但是如何定义回调函数?

时间:2012-10-07 19:45:24

标签: javascript angularjs

注意:我也在AngularJS邮件列表中发布了这个问题:https://groups.google.com/forum/#!topic/angular/UC8_pZsdn2U

大家好,

我正在构建我的第一个AngularJS应用程序,并且我不熟悉Javascript,所以任何指导都将非常感激:)

我的应用程序有两个控制器,ClientController和CountryController。在CountryController中,我正在从使用$ resource对象的CountryService中检索国家列表。这很好,但我希望能够与ClientController共享国家/地区列表。经过一些研究,我读到我应该使用CountryService存储数据并将该服务注入两个控制器。

这是我之前的代码:

CountryService:

services.factory('CountryService', function($resource) {
    return $resource('http://localhost:port/restwrapper/client.json', {port: ':8080'});
});

CountryController:

//Get list of countries         
//inherently async query using deferred promise
$scope.countries = CountryService.query(function(result){       
        //preselected first entry as default
    $scope.selected.country = $scope.countries[0];  
});

在我改变后,他们看起来像这样:

CountryService:

services.factory('CountryService', function($resource) {
    var countryService = {};

    var data;
    var resource = $resource('http://localhost:port/restwrapper/country.json', {port: ':8080'});

    var countries = function() {
        data = resource.query();
        return data;
    }

    return {
        getCountries: function() {
            if(data) {
                console.log("returning cached data");
                return data;
            } else {
                console.log("getting countries from server");
                return countries(); 
            }

        }
    };
  });

CountryController:

$scope.countries = CountryService.getCountries(function(result){
        console.log("i need a callback function here...");
});

问题是我曾经能够使用$ resource.query()中的回调函数来预选默认选择,但是现在我已经将query()调用移到了我的CountryService中,我似乎失去了什么。

解决这个问题的最佳方法是什么?

感谢您的帮助, 肖恩

4 个答案:

答案 0 :(得分:4)

好的......看起来我通过将回调函数一直传递给resource.query()调用来解决问题。仍然不确定这是否是最好的方法。

作为参考,这就是我所做的:

CountryController:

$scope.countries = CountryService.getCountries(function(){
    //preselected default
    $scope.selected.country = $scope.countries[0];  
});

CountryService:

//Country Service. Will contain all relevant rest methods here
services.factory('CountryService', function($resource) {
    var countryService = {};

    var data;
    var resource = $resource('http://localhost:port/restwrapper/country.json', {port: ':8080'});

    var countries = function(callback) {
        data = resource.query(callback);
        return data;
    }


    return {
        getCountries: function(callback) {
            if(data) {
                console.log("returning cached data");
                return data;
            } else {
                console.log("getting countries from server");
                return countries(callback); 
            }

        }
    };
  });

答案 1 :(得分:1)

你应该看看$q service,你可以这样做:

promise.then(callback);

从1.1.3开始,您可以使用$then访问承诺,例如resource.query().$then(callback);

答案 2 :(得分:0)

在这个新场景中,你可以使用$ scope。$ watch。您使用它的方式如下。

$scope.countries = CountryService.getCountries();

$scope.$watch('countries',function(newValue){
//need to check if newValue has a value because 
//the first time watch fires it will be undefined.
    if(newValue && newValue.length > 0 ){
        $scope.selected.country = $scope.countries[0];
    }
});

希望这有帮助。

答案 3 :(得分:0)

AngularJS有自己的缓存查询方式,您应该使用它。至于回调,将查询分配给变量是没有用的,因为无论如何都会返回一个promise。你应该只是总是期待一个承诺,并将你的回调传递给成功或最终。