{{testValue}}

JS var" />

Представление AngularJS не обновляется при смене модели

javascript angularjs

97590 просмотра

4 ответа

3226 Репутация автора

Я пытаюсь выяснить, как работает Angular, и у меня возникают проблемы с обновлением моего взгляда при изменении модели.

HTML

<div ng-app="test">  
        <p ng-controller="TestCtrl">  
            {{testValue}}  
        </p>  
    </div>

JS 

var app = angular.module('test', []);

    app.controller('TestCtrl', function ($scope) {
       $scope.testValue = 0;

        setInterval(function() {
            console.log($scope.testValue++);
        }, 500);
    });

http://jsfiddle.net/N2G7z/

есть идеи?

Автор: shunryu111 Источник Размещён: 19.11.2013 11:18

Ответы (4)

28 плюса

56801 Репутация автора

setTimoutвыполняет за пределами угла. Вам нужно использовать $timeoutсервис, чтобы это работало:

var app = angular.module('test', []);

    app.controller('TestCtrl', function ($scope, $timeout) {
       $scope.testValue = 0;

        $timeout(function() {
            console.log($scope.testValue++);
        }, 500);
    });

Причина в том, что двусторонняя привязка в angular использует грязную проверку. Это хорошая статья о грязной проверке angular. $scope.$apply()стартует $digestцикл. Это будет применять связывание. $timeoutобрабатывает $applyдля вас, поэтому это рекомендуемый сервис для использования при тайм-аутах.

По сути, связывание происходит во время $digestцикла (если значение считается другим).

Автор: Davin Tryon Размещён: 19.11.2013 11:19

36 плюса

938 Репутация автора

Просто используйте $ интервал

Вот ваш код изменен. http://plnkr.co/edit/m7psQ5rwx4w1yAwAFdyr?p=preview

var app = angular.module('test', []);

app.controller('TestCtrl', function ($scope, $interval) {
   $scope.testValue = 0;

    $interval(function() {
        $scope.testValue++;
    }, 500);
});
Автор: Diego Vieira Размещён: 19.11.2013 11:41

117 плюса

3602 Репутация автора

Решение

Как упомянул Ajay beniwal, вы должны использовать Apply, чтобы начать пищеварение.

var app = angular.module('test', []);

app.controller('TestCtrl', function ($scope) {
   $scope.testValue = 0;

    setInterval(function() {
        console.log($scope.testValue++);
        $scope.$apply() 
    }, 500);
});
Автор: Boris Ivanov Размещён: 19.11.2013 11:56

8 плюса

81 Репутация автора

Не используйте $scope.$apply()Angular уже использует его, и это может привести к этой ошибке

$ rootScope: действие inprog уже выполняется

если вы используете дважды, используйте $timeoutили интервал

Автор: Ana Caroline Ferreira Размещён: 18.01.2017 10:40
Вопросы из категории :
32x32