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

Question

为什么 angular 这个小模块在 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's wrapper for window.setInterval here is the DOC

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

别忘了注入 $interval as,

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

当使用 setInterval 时，它超出了 angular 的范围，所以你需要在这里使用 $interval。 $interval 针对范围执行，

或使用$scope.$apply()

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

$apply enables to integrate changes with the digest cycle

this answer would be helpful

Answer 2

是的，使用 $interval 是一种解决方案。通常你会在 $scope 的方法属性上更改模型。所以 angular 将负责更新视图。如果在指令中使用 jQuery 回调，则必须使用 scope.$apply 以便 angular 知道发生了什么事

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

Why AngularJS ng-bind does not update the view

javascript

angularjs

ng-bind