Question

如果我在$ timeout后修改$ scope，我的视图将无法正确呈现。我不明白为什么。如果我不先执行$ timeout，它就可以工作。

http://plnkr.co/edit/oGuPgt7VaYKgPFh00lDV?p=preview

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js'></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<script>

angular.module('treeApp', [])

.controller('TreeController', ['$scope', '$timeout', function($scope, $timeout) {

  // This works
  // $scope.nodes = {
  //   1:{node_id:1, text:'foo text', parent_id:null, child_ids:[2,3]},
  //   2:{node_id:2, text:'bar text', parent_id:1, child_ids:[]},
  //   3:{node_id:3, text:'abc text', parent_id:1, child_ids:[]}
  // }
  // $scope.top_ids = [1]

  // This doesn't work
  $timeout(function() {
    $scope.nodes = {
      1:{node_id:1, text:'foo text', parent_id:null, child_ids:[2,3]},
      2:{node_id:2, text:'bar text', parent_id:1, child_ids:[]},
      3:{node_id:3, text:'red text', parent_id:1, child_ids:[]}
    }
    $scope.top_ids = [1]
  }, 1000)
}])

</script>


<div ng-app="treeApp">

  <script type="text/ng-template" id="node.html">
    <li node_id="{{node_id}}" ng-repeat="node_id in node_ids" ui-tree-node
        ng-init="node = nodes[node_id]">
      {{node.text}}
      <ol ng-include="'node.html'" ng-init="node_ids = node.child_ids"></ol>
    </li>
  </script>

  <div ng-controller="TreeController">
    <ol ng-include="'node.html'" ng-init="node_ids = top_ids"></ol>
    <pre>{{top_ids | json}}</pre>
    <pre>{{nodes | json}}</pre>
  </div>
</div>

Answer 1

<ol ng-include="'node.html'" ng-init="node_ids = top_ids"></ol>

您使用node_ids初始化top_ids。这是一次性任务，而非约束力。当您使用$timeout时，top_ids的值在分配时为undefined。

最简单的解决方案是将$scope.top_ids重命名为$scope.node_ids并删除ng-init。

Answer 2

使用$scope.$apply();，如下所示

  $timeout(function() {
    $scope.nodes = {
      1:{node_id:1, text:'foo text', parent_id:null, child_ids:[2,3]},
      2:{node_id:2, text:'bar text', parent_id:1, child_ids:[]},
      3:{node_id:3, text:'abc text', parent_id:1, child_ids:[]}
    }
    $scope.top_ids = [1];
    $scope.$apply();
  }, 1000)

或者您可以包装模型更改，如下所示，

$timeout(function() {    
    $scope.$apply(function () {
         $scope.nodes = {
                1:{node_id:1, text:'foo text', parent_id:null, child_ids:[2,3]},
                2:{node_id:2, text:'bar text', parent_id:1, child_ids:[]},
                3:{node_id:3, text:'abc text', parent_id:1, child_ids:[]}
         }
         $scope.top_ids = [1];
    });
}, 1000)

这是一个很好的demo，

这是工作plunker

如果您更改Angular上下文之外的任何模型，那么您需要通过手动调用$ apply（）来通知Angular更改.....例如，如果您使用JavaScript的setTimeout（）函数来更新范围模型，Angular无法知道您可能会更改什么。在这种情况下，您有责任手动调用$ apply（）

角度视图未更新

2 个答案: