Angularjs setTimeout 内的更新范围变量不起作用

Question

我有一个数组，其中包含我发送到外部应用程序的许多命令。

$scope.commandLog = [{"id":"1", "time":"12.02.2015 20:05:20.606","command":"cmd1", "status":"idle"},
                    {"id":"2", "time":"12.02.2015 20:05:20.606","command":"cmd2", "status":"idle"},
                    {"id":"3", "time":"12.02.2015 20:05:20.606","command":"cmd3", "status":"idle"},
                    {"id":"4", "time":"12.02.2015 20:05:44.162","command":"cmd4", "status":"idle"},
                    {"id":"5", "time":"12.02.2015 20:05:44.162","command":"cmd5", "status":"success"},
                    {"id":"6", "time":"12.02.2015 20:05:44.162","command":"cmd6", "status":"idle"},
                    {"id":"7", "time":"13.02.2015 12:05:52.181","command":"cmd7", "status":"idle"},
                    {"id":"8", "time":"13.02.2015 12:05:52.181","command":"cmd8", "status":"idle"}]

我正在遍历数组，并在下一个循环开始之前设置延迟。这工作正常。

for (var i = 0; i < $scope.commandLog.length; i++)
    {

        (function(index) {
            setTimeout(function() {

               // DO STUFF HERE

            }, i * 2000);
        })(i);

    }

我想像这样更改当前数组索引处的对象状态：

$scope.commandLog[index].status = 'active';

我有一个 table 显示命令及其状态

<table class="table table-hover">
  <thead>
    <th>Time</th>
    <th>&nbsp;</th>
    <th>Command</th>
    <th>Status</th>
  </thead>
  <tbody>
    <tr ng-repeat="cmd in commandLog" ng-class="cmd.status" ng-attr-id="{{ 'command-' + cmd.id }}">
      <td>{{cmd.time}}</td>
      <td>  <span class="btn btn-primary"  ng-click="sendCommand(cmd.command)"><i class="fa fa-play"></i></span></td>
      <td>{{cmd.command}}</td>
      <td>{{cmd.status}}</td>
    </tr>
  </tbody>
</table>

问题是单元格 <td>{{cmd.status}}</td> 没有更新为 "active" 即使当我将对象写入控制台时，我确实看到状态设置为活动。

如果我运行没有延迟的代码，只有 for 循环，它确实有效。

带有完整代码的 JSFiddle：https://jsfiddle.net/8ezh6Ljh/1/

如果有人能解释我做错了什么，我将不胜感激。 TIA

Answer 1

您在 setTimeout 函数内的代码运行在 angular 世界之外。

要让 angular 了解您对数据所做的更改，请致电 $scope.$apply() 或使用 $timeout 服务。

勾选这个plunker

Angularjs setTimeout 内的更新范围变量不起作用

Angularjs Update Scope variable within setTimeout not working

javascript

settimeout

angularjs