Change in AngularJS factory return value not reflected

Question

https://plnkr.co/edit/hccJqwtDlqcOBhxnwZ94?p=preview

In this example when the factory return value changes in $timeout, the scope variable which points to the factory (in this case anotherVar) reflects the change but the variable that points the specific property (var) does not.

// Code goes here

angular.module("sample",[])
 .controller("myctrl",function($scope,TestService){
    $scope.var = TestService.name;
    $scope.anotherVar = TestService;
    })
.factory('TestService',function($timeout){
    var ret = {};
    ret.name = "temporary";
    $timeout(function() {
        ret.name = "final";
    },4000);
    return ret;
    
});

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="sample" ng-controller="myctrl">
    <h1>Hello Plunker!</h1>
    Value: {{var}} <br>
    Another Value : {{anotherVar}}
  </body>

</html>

you are assigning $scope.var to a primitive. It makes sense that it wouldn't change again, since it is assigned to a string. It no longer has access to the knowledge of what is inside the factory's returned object. anotherVar, on the other hand, is assigned to the reference of the object, so naturally anotherVar.name would return whatever value is currently stored within the object. — Devin Fields
– Devin Fields, Commented Aug 22, 2018 at 19:24
Thanks @DevinFields, Your reply gave me insight to exact search i should do and here i got a nice article on this issue. (just for other who might have similar confusion) stsc3000.github.io/blog/2013/10/26/… — lavender
– lavender, Commented Aug 22, 2018 at 19:46

P. Best · Accepted Answer · 2018-08-22 19:36:00Z

1

Your first variable, var, has already been set based on the return value from the first factory call. Since it's scoped to the controller myCtrl, it isn't going to look elsewhere for changes.

Your second variable, anotherVar, is scoped to the factory, so the update in your $timeout() is reflected.

You can read more about AngularJS scope here.

answered Aug 22, 2018 at 19:36

P. Best

212 bronze badges

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

Comments

IsraGab · Accepted Answer · 2018-08-22 20:34:18Z

Is not specific to angular, but with javascript, and the diffrence between pass by reference or pass by value (known in almost all of programming languages).

When you assign a variable:

var a = 3;
//then
var b = a;
// here you'expecting that b == 3, isn't it?
// well you're right!

//now let's do the following:
b = 5;
// are you expecting to see 5 into a (because b=a)?
// well, a == 3

Because the a variable was a primitive value so the affectation (b = a) was a pass by variable (=only the variable of a was set into b).

If you try now to pass by reference (using object):

var a = {}; // define a as an object
a.a = 3; // a get a property a and its value is 3

var b = a; // now the affectation is an object (=pass by reference)
// we are not assigning the value of a but its reference.

if you're changing the a property inside the b object: b.a = 5?

now if you look at the a object, you will see that a.a = 5

And that the reason of the behavior you have in you factory.

Angular factories are objects.

You are returning the object TestService

but your $scope.var is assigned to a primitive value (TestService.name), so when that value is changed it won't be reflected in your $scope.var.

In the second line an object is assigned (TestService), so if a property inside of this object chenged it will be reflected, because it is the SAME OBJECT.

To summarize:

Assign a value it is only the value that is assigned, if value of a changes you won't see it on b variable (because that 2 distinct variables)
Assign by reference says that a and b are actually the SAME object. if one of their properties change you will see it in the other variable

Collectives™ on Stack Overflow

Change in AngularJS factory return value not reflected

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related