AngularJS - $interval not recognising variables

Question

I am trying to make a basic function that adds 1 to the variable 'wood' every second.

In javascript, a simple

setInterval(function(){
    wood++;
}, 1000);

would do the trick.

In Angular, I've been shown

app.controller('RandomCtrl', function($interval){
    this.wood = 0;
    $interval(function(){
        this.wood++;
    }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('RandomCtrl', function($interval){
        this.wood = 0;
        $interval(function(){
            this.wood++;
            document.getElementById('p').innerHTML = this.wood;
        }, 1000);
    });  
</script>
<div ng-app='app' ng-controller='RandomCtrl as rand'>
    Wood: {{ rand.wood }}
    <br><br>Wood's value straight from the $interval:<p id='p'></p>
    So, the interval is fine, but the variable is undefined inside it, which is the whole point of me using this interval.
  <br><br>Also, I want this.wood to hold the value, nothing else.
</div>

However, the code above for some reason doesn't work.

It treats this.wood+1 as 'NaN' and this.wood as 'undefined'

Here's the snippet:

the this context is different in your angular example. use var self = this; in the outside function and use self.wood++ in the $interval. PS this is not angular specific it's javascript basics — Liviu T.
– Liviu T., Commented Apr 4, 2015 at 22:11

jantimon · Accepted Answer · 2015-04-04 22:26:59Z

From http://ryanmorr.com/understanding-scope-and-context-in-javascript/ :

Context is most often determined by how a function is invoked. When a function is called as a method of an object, this is set to the object the method is called on

When called as an unbound function, this will default to the global context or window object in the browser. However, if the function is executed in strict mode, the context will default to undefined.

Just use angulars $scope or a variable declared in the outer function scope:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('RandomCtrl', function($interval, $scope){
        var self = this;
        self.wood = 0;
        $scope.wood = 0;
        $interval(function(){
            $scope.wood++;
            self.wood++;
        }, 1000);
    });  
</script>
<div ng-app='app' ng-controller='RandomCtrl as rand'>
    Wood: {{ wood }} {{ rand.wood }}
    <br><br>Wood's value straight from the $interval:<p id='p'></p>
    So, the interval is fine, but the variable is undefined inside it, which is the whole point of me using this interval.
  <br><br>Also, I want this.wood to hold the value, nothing else.
</div>

Andreas Christiansen · Accepted Answer · 2015-04-04 22:29:36Z

0

The problem here is that you are trying to access your scope in a new context, where 'this' no longer refers to your angular controller.

In addition, Angular allows variables to be accessible through your controller's scope. If you want to use your variable wood in your template, you have to assign it on the scope object.

Your code should read:

app.controller('RandomCtrl', function($interval, $scope){
$scope.wood = 0;
$interval(function(){
    $scope.wood++;
}, 1000);
});

The reason why this fails silently is that this.TEST++ returns NaN and not an error.

answered Apr 4, 2015 at 22:29

Andreas Christiansen

9469 silver badges18 bronze badges

Collectives™ on Stack Overflow

AngularJS - $interval not recognising variables

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