使用 $timeout 时动态 AngularJS 消失

Question

我对 AngularJs 完全陌生，但我已经设法学习了框架的基础知识。然而，我最近遇到了 AngularJs 的一种奇异行为，它以动态性着称。

问题来了：

Index.html

<div ng-controller="userClick as clk">
 <div id="square1">{{ clk.board[0] }}</div>
</div>

app.js

app.controller('userClick', function($timeout) {
   this.board = ['', '', '', '', '', '', '', '', ''];

$timeout(reset, 1000);
function reset (){
 this.board = ['', '', '', '', '', '', '', '', ''];
 console.log(this.board); //returns ^^ (empty array)
}

预计当用户点击页面上的一个方块时，会执行一个函数并且一切顺利。但是，当我尝试使用 $timeout 函数将响应延迟一秒钟时，数组 this.board 成功重置为空数组，但 div 与id square1 不会再次变空。

似乎有些东西导致 Angular 在这一点上是静态的，我不明白。

注意：这是一款井字游戏。

Answer 1

您可以将reset 函数声明为控制器函数并使用它。

app.controller('userClick', ['$timeout', function($timeout) {
    var ctrl = this;
    ctrl.board = ['', '', '', '', '', '', '', '', ''];

    ctrl.reset = function() {
       ctrl.board = ['', '', '', '', '', '', '', '', ''];
       console.log(ctrl.board); 
    };
    $timeout(ctrl.reset, 1000);

    // Rest of your controller logic
}]);