Почему AngularJS ng-bind не обновляет представление

Почему этот маленький угловой модуль не может обновить вид, когда 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, Почему это? Мне нужно сделать что-нибудь еще?

Источник

2 ответа

Решение

Использование $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 позволяет интегрировать изменения с циклом дайджеста

этот ответ будет полезен

Источник

Да, использовать $ интервал - это решение. Обычно вы меняете модель для атрибута метода $scope. Так что Angular возьмет на себя ответственность за обновление представления. Если вы используете обратный вызов jQuery внутри директивы, вам нужно будет использовать scope.$ Apply, чтобы angular знал, что что-то произошло

Источник
Другие вопросы по тегам