source

모델 변경 시 AngularJS 뷰가 업데이트되지 않음

manycodes 2023. 2. 22. 22:49
반응형

모델 변경 시 AngularJS 뷰가 업데이트되지 않음

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/

좋은 생각 있어?

위에서 언급한 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);
});

$interval만 사용

수정된 코드입니다.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);
});

setTimout는 각도 밖에서 실행됩니다.를 사용해야 합니다.$timeout이 기능을 위해 필요한 서비스:

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

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

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

그 이유는 각도에서의 양방향 바인딩은 더티 체크를 사용하기 때문입니다.앵글의 지저분한 체크에 대해 읽어보시기 좋은 기사입니다. $scope.$apply()을 시작하다$digest이 경우 바인딩이 적용됩니다. $timeout처리하다$apply따라서 타임아웃을 사용할 때 사용하는 것이 좋습니다.

기본적으로 바인딩은 다음 중 발생합니다.$digestcycle (값이 다른 경우)

사용 안 함$scope.$apply()angular는 이미 사용하고 있으며 이 에러가 발생할 수 있습니다.

$rootScope: 이미 진행 중인 비프로그래그 액션

두 번 사용하는 경우,$timeout또는 간격

언급URL : https://stackoverflow.com/questions/20070077/angularjs-view-not-updating-on-model-change

반응형