AngularJS：将服务变量绑定到控制器的$ scope上的值

Question

I am creating a single-page AngularJS web app. My app needs to be able to query a backend service to get some information about a user's state, and this state information needs to be available to the various pieces of the single-page app. I created a service to manage this functionality, but I'm having trouble hooking things up in a way that seems reasonable to me.

Initially, I had things set up like this...

<service.js>
...
var url = 'www.my-backend.com';
this.val = [
    {
        name: 'undefined',
        isValid: false
    }
];
$http.get(url, {})
    .success (function (data) {
        this.val = data;
    })
    .error (function () {
        this.val =  [
            {
                name: 'error',
                isValid: false
            }
         ];
    });
...

And then in my controller...

<controller.js>
...
$scope.val = service.val
...

This didn't work though ( val.name was 'undefined'), presumably because service.val was bound to the controller's $scope before the get request had a chance to terminate. However, that does seem at odds with what I read here .

The next thing I did was this...

<service.js>
...
var url = 'www.my-backend.com';
this.valPromise = $http.get(url, {});
...

And then in my controller...

<controller.js>
...
$scope.val = [
    {
        name: 'undefined',
        isValid: false
    }
];
service.valPromise
    .success (function (data) {
        $scope.val = data;
    })
    .error (function () {
        $scope.val =  [
            {
                name: 'error',
                isValid: false
            }
         ];
    });
...

This worked, but I didn't like it. I feel like that logic belongs in the service.

So the next thing I did was work through the various suggestions that I found here , although none of them seemed to have the desired effect. I also saw this , but it seems like overkill and not really applicable to my problem.

Ideally I'd really like to figure out how to get my first attempt working (tightly bind my service variable to my controller scope by reference), but if that's not something that can really be done within the Angular framework, I'm happy to use some kind of watch behavior. Can anyone spot what I'm doing wrong or why my service variable isn't getting properly hooked up to my controller?

Answer 1

In your $http callbacks this is not the service. You'll find plenty of answers about the meaning of this on SO. You need to refer to the service via a variable.

The second problem is that this.val = data; would assign a new value to the service, but doesn't change the data in the scope, which still points to the old array. So you need to copy the new data to the existing array.

var service = this;
$http.get(url, {})
.success (function (data) {
    angular.copy(data, service.val);
})

Answer 2

I ran into this problem the other day. The reason it does not get set is because there is a race condition and because the data access is inside the service layer, it will lose every time. It seems like there should be a easy way to do this. I ended up just having my initial controller make the data access calls and set the properties in the service for other controllers to get.