AngularJS service does not return refence but value of object

Question

I find that sometimes it is better to use angularJS services to communicate between two component rather than using emit/broadcast techiques. I have create simple UserService:

(function(){
    angular.module('userService')
        .factory('UserService', userServiceFn);

    userServiceFn.$inject = [];

    function userServiceFn(){
        var user = {
            isLogged: false,
            info: ''
        };
        return {
            setUser: setUser,
            getUser: getUser,
            clearUser: clearUser
        };

        function setUser(info){
            user.isLogged = true;
            user.info = info;
        };
        function getUser(){
            return user;
        };
        function clearUser(){
            user.isLogged = false;
            user.info = {};
        };
    }
})();

then I can inject this service where ever I need to no current login status var user = UserService.getUser(); and for example toggle login button <button ng-hide="user.isLogged">login</button>

Great thing about this technique is that when ever I use UserService.clearUser() login button will automatically be shown because getUser() passes a reference of user object and ng-hide binds to changes in this reference.

I created MarkerService that uses same techique but there is strange behavior. getCoords does not return reference of coords but value of coords.

(function(){
    angular.module('app')
        .factory('MarkerService', MarkerServiceFn);
    MarkerServiceFn.$inject = [];
    function MarkerServiceFn(){
        var coords = [
            56.936,
            22.12
        ];
        return {
            setCoords: setCoords,
            getCoords: getCoords
        };
        function setCoords(a){
            console.log(coords);
            coords = a;
            console.log(coords);
        }
        function getCoords(){
            return coords;
        }
    }
})();

Here is a working plunker. What confuses me is that both service are created in the same way but act differently. Have spent two days finding for reason of this behavior, even re-wrote code for both services couple of times but always get the same issue.

Episodex · Accepted Answer · 2017-04-07 11:15:24Z

2

In user service you are changing properties of the object, not replacing the object itself. Because of this the reference in HTML is not broken and you see the change.

In coordinates service you replace the object totally but your HTML still holds reference to old object (which service now doesn't reference).

You must change your setCoords to:

function setCoords(a){
    coords[0] = a[0];
    coords[1] = a[1];
}

edited Apr 7, 2017 at 11:15

answered Apr 7, 2017 at 9:18

Episodex

4,5894 gold badges45 silver badges64 bronze badges

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

1 Comment

Episodex Over a year ago

Hm, I see that it does not work in you plunkr though. But it uses some very different bindings to what I'm used to, so maybe the issue is also somewhere else. Can you try with normal {{ }} bindings?

Mansi Parekh · Accepted Answer · 2017-04-07 09:35:45Z

0

I am not sure why your code is not working, it is setting value but not displaying new value on page. But if we use direct get method for binding it works.

Link

I have added getC function and used that for binding.

ctrl.getC = function(){
    return MarkerService.getCoords();
}
<span ng-bind="$ctrl.getC()"></span>

answered Apr 7, 2017 at 9:35

Mansi Parekh

5192 silver badges13 bronze badges

Collectives™ on Stack Overflow

AngularJS service does not return refence but value of object

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related