Question

为什么这个小角度模块在ng-bind属性发生变化时无法更新视图？

<body ng-app="bindExample">

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      var vm = this;
      vm.name = 'Whirled';
      window.setInterval(function(){ vm.name = 'Jon';}, 5000);
    }]);
</script>

<div ng-controller="ExampleController as vm">
    Hello <span ng-bind="vm.name"></span>!
</div>
</body>

我预计在5秒后输出会因Hello Jon而改变Hello Whirled。为什么是这样？我还需要做其他事吗？

Answer 1

使用$interval服务

Angular的window.setInterval包装器是DOC

$interval(function(){
     vm.name = 'Jon';
}, 1000);

不要忘记将$interval注入，

.controller('ExampleController', ['$scope', $interval, function($scope, $interval) { ....

将setInterval用于角度范围时，所以你需要在这里使用$interval。 $interval是针对范围执行的，

或使用$scope.$apply()

window.setInterval(function(){
    vm.name = 'Jon';
    $scope.$apply();
}, 5000);

$ apply可以将更改与摘要周期集成

this answer would be helpful

Answer 2

是的，使用$ interval是一种解决方案。通常，您将在$ scope的method属性上更改模型。因此angular将负责更新视图。如果在指令中使用jQuery回调，则必须使用scope。$ apply以便angular知道发生的事情

为什么AngularJS ng-bind不更新视图

2 个答案: