Question

我正在努力创建一个基本功能，将变量＆＃39; wood＆＃39;每一秒。

在javascript中，一个简单的

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

会做到这一点。

在Angular中，我已经被展示了

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

＆＃13;

<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>

＆＃13;

但是，上面的代码由于某种原因不起作用。

它将this.wood + 1视为＆＃39; NaN＆＃39;而this.wood作为＆＃39; undefined＆＃39;

以下是片段：

Answer 1

来自http://ryanmorr.com/understanding-scope-and-context-in-javascript/：

上下文通常取决于函数的调用方式。当一个   函数被称为对象的方法，this被设置为对象
上调用该方法
当作为未绑定函数调用时，this将默认为全局函数   浏览器中的上下文或窗口对象。但是，如果功能是   在严格模式下执行，上下文将默认为undefined。

只需使用angulars $ 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>

Answer 2

这里的问题是你试图在新的环境中访问你的范围，其中'this'不再指你的角度控制器。

此外，Angular允许通过控制器的范围访问变量。如果要在模板中使用变量木材，则必须在范围对象上分配它。

您的代码应为：

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

无声地失败的原因是this.TEST ++返回NaN而不是错误。

AngularJS - $ interval不识别变量

2 个答案: