javascript AngularJS：使用共享服务（带 $resource）在控制器之间共享数据，但如何定义回调函数？

AngularJS: Using Shared Service(with $resource) to share data between controllers, but how to define callback functions?

提问by shaunlim

Note: I also posted this question on the AngularJS mailing list here: https://groups.google.com/forum/#!topic/angular/UC8_pZsdn2U

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

Hi All,

大家好，

I'm building my first AngularJS app and am not very familiar with Javascript to begin with so any guidance will be much appreciated :)

我正在构建我的第一个 AngularJS 应用程序，一开始我对 Javascript 不是很熟悉，所以任何指导都将不胜感激:)

My App has two controllers, ClientController and CountryController. In CountryController, I'm retrieving a list of countries from a CountryService that uses the $resource object. This works fine, but I want to be able to share the list of countries with the ClientController. After some research, I read that I should use the CountryService to store the data and inject that service into both controllers.

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

This was the code I had before:

这是我之前的代码：

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];  
});

And after my changes, they look like this:

在我更改之后，它们看起来像这样：

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...");
});

---

---

The problem is that I used to be able to use the callback function in $resource.query() to preselect a default selection, but now that I've moved the query() call to within my CountryService, I seemed to have lost what.

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

What's the best way to go about solving this problem?

解决此问题的最佳方法是什么？

Thanks for your help, Shaun

谢谢你的帮助，肖恩

采纳答案by shaunlim

Ok..so looks like I solved the problem by passing a callback function all the way up to the resource.query() call. Still not sure if this is the best way to do this.

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

For reference, this is what I did:

作为参考，这就是我所做的：

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); 
            }

        }
    };
  });

回答by Guillaume86

You should take a look at the $q service, you can do:

你应该看看$q 服务，你可以这样做：

promise.then(callback);

From 1.1.3, you can access promises with $then, for exemple resource.query().$then(callback);

从1.1.3，您可以访问与承诺$then，对于为例resource.query().$then(callback);

回答by Gepsens

AngularJS has its own way of caching queries, which you should use. As for the callback, it's no use assigning the query to a variable, since a promise will be returned anyway. You should simply always expect a promise, and pass your callback inside success or finally.

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

回答by ganaraj

In this new scenario you could use a $scope.$watch. The way you use it is as follows.

在这个新场景中，您可以使用 $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];
    }
});

Hope this helps.

希望这可以帮助。