AngularJS-Ansicht wird beim Modellwechsel nicht aktualisiert

Ich versuche herauszufinden, wie Angular funktioniert, und habe Probleme, meine Ansicht zu aktualisieren, wenn sich das Modell ändert.

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/

irgendwelche Ideen?

Wie Ajay Beniwal oben erwähnt hat, müssen Sie Apply verwenden, um die Verdauung zu starten.

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

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

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

Verwenden Sie einfach $ interval

Hier ist Ihr Code geändert. 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);
});

setTimoutwird außerhalb des Winkels ausgeführt. Sie müssen den $timeoutDienst verwenden, damit dies funktioniert:

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

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

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

Der Grund dafür ist, dass die bidirektionale Bindung im Winkel eine schmutzige Prüfung verwendet. Dies ist ein guter Artikel über die schmutzige Prüfung von Angular. $scope.$apply()startet einen $digestZyklus. Dies gilt für die Bindung. $timeoutbehandelt das $applyfür Sie, so dass es der empfohlene Dienst ist, wenn Sie Zeitüberschreitungen verwenden.

Im Wesentlichen erfolgt die Bindung während des $digestZyklus (wenn der Wert als unterschiedlich angesehen wird).

Verwenden Sie nicht $scope.$apply()eckig verwendet es bereits und es kann zu diesem Fehler führen

$ rootScope: Inprog-Aktion wird bereits ausgeführt

Wenn Sie zweimal verwenden, verwenden Sie $timeoutoder Intervall