angular controller variable changes when set afterwards?

Question

var jem = 55;

var app = angular.module("store",[]);
app.controller("storeController",function(){
  this.product = jem;
});


jem = 0;

<!DOCTYPE html>
<html ng-app="store">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="storeController as store">
  <p>{{"HI"}}</p>
  <p>{{store.product}} </p>

</body>
</html>

Why does this output is "0" instead of "55"? Since jem is a basic javascript variable when product is assigned with jem it gets its value copied and should not change when jem is changed?

sfletche · Accepted Answer · 2015-07-17 04:20:38Z

3

Notice that your controller definition is inside a callback function (as it should be...)

app.controller("storeController", function(){
  this.product = jem;
});

A side effect of this, relevant to your question, is that the assignment statement within the callback, this.product = jem, will get executed after the assignment statement, jem = 0, outside of the callback.

The takeaway is that callbacks do not take place sequentially with the rest of your code.

answered Jul 17, 2015 at 4:20

sfletche

50.1k32 gold badges110 silver badges120 bronze badges

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

Collectives™ on Stack Overflow

angular controller variable changes when set afterwards?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related