AngularJs service binding not updating

Question

I am trying to find a way to create a service that can sit at my highest level scope and hold variables such as the user state and whatever else.

Right now I am trying to create a simple example in which I bind the numbers together. However the UI layer never updates unless I force my angular to go get the value again.

What happens if you remove the line that says getNumber() you see that the number on the html never updates. I tried calling $apply and that give me an error that one is already in effect.

Code:

$scope.update = function () {
        SampleService.update();

//Forcing the number to be updated by asking the service to return it
        $scope.number = SampleService.getNumber();

    };
//Why doesn't this force $scope.number to change as SampleServce.number changes?
    $scope.number = SampleService.number;

Service:

(function () {
'use strict';

angular
    .module('Services')
    .service('SampleService', SampleService);

SampleService.$inject = ['$http'];

function SampleService($http) {

    var Service = {
        number: 0
    };


    Service.update = function ()
    {
        Service.number += 1;
    };

    Service.getNumber = function ()
    {
        return Service.number;
    };

    return Service;
}
})();

Claies · Accepted Answer · 2017-02-17 15:01:46Z

1

This occurs because number is a primitive property of Service. Setting $scope.number (which is a primitive) to be equal to SampleService.number (which is also a primitive) is done ByVal, not ByRef.

Adding the SampleService object itself to $scope would create a reference, as would returning any objects that are properties of SampleService. Here is one example of referencing the service rather than just the single primitive property:

$scope.service = SampleService;

{{service.number}}

http://plnkr.co/edit/eWk8lZRa0dGIhd2I8h9t?p=preview

answered Feb 17, 2017 at 15:01

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bailey Miller Over a year ago

I just figured that out but instead of storing $scope.service = SampleService I do this, $scope.State = SampleService.getData() which returns the Service object from SampleService. Is there any benefit or downsides to our two similar but different methods?

Claies Over a year ago

the only difference between setting it directly and using a getData() is that by using a getData() function, your service doesn't have to return anything.

Bailey Miller Over a year ago

Thank you for answering this question and the one in the comments. I like my getData approach because of a personal reason I can literally see that I am expecting my data.

Bailey Miller Over a year ago

I would like to thank you one more time because of getting this issue fixed I could implement a lot of code today. If you would like to see what I accomplished check out the new features at app.baileysproject.com

Torben Pi Jensen · Accepted Answer · 2017-02-17 14:58:31Z

1

Numbers, string and other basic types are passed as values, and not references, and hence you get the actual number (i.e. 7) and not the address of Service.number.

Only way I know to circumvent this is to return a object, and use a property on this instead.

answered Feb 17, 2017 at 14:58

Torben Pi Jensen

8909 silver badges28 bronze badges

1 Comment

Bailey Miller Over a year ago

I thought that was what I am doing at the bottom of my serivce, where I return the variable Service. Because in the controllers I can call methods on my SampleService that are exposed inside of Service at the SampleService level.

Collectives™ on Stack Overflow

AngularJs service binding not updating

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related