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

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 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>没有更新为“事件”，即使当我将对象写入控制台时，我确实看到状态设置为事件。

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

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

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

Answer 1

setTimeout 函数中的代码在 Angular 世界之外运行。

要让 Angular 知道您对数据所做的更改，请调用 $scope.$apply() 或使用 $timeout 服务。

检查这个plunker