angular $ watch Funktion funktioniert nicht mit Modellwechsel

Question

Hallo Freunde Ich bin neu in eckigen und stecken bleiben beim Erstellen eines Beispiels für $watch Funktion. Ich möchte nur Daten in bestehende Modal (JSON-Daten) schieben und die Änderungen im Modell werden in view widerspiegeln. Bitte überprüfen Sie unter meinem Code oder überprüfen fiddle here

SCRIPT

var list = [{ 
         name: 'Jon', 
         joining_date:'2015-10-23', 
         age: 23 
        }, 
        { 
         name:'Viki', 
         joining_date:'2015-01-24', 
         age: 20 
        }, 
        { 
         name: 'Abc', 
         joining_date:'2015-10-25', 
         age: 43 
        }, 
        { 
         name: 'XYZ', 
         joining_date:'2015-10-21', 
         age: 21 
       }]; 


var empApp = angular.module('emp-list', []); 
empApp.controller('emp-table',function($scope){ 
    $scope.data = list; 

    $scope.dateFormate = function(joinDate){ 
     return new Date(joinDate) 
    } 
     // PUSHING DATA IN EXISTING MODAL 
     setInterval(function(){ 
      $scope.data.push({name: 'XYZ', joining_date:'2015-10-21',age: 21}) 
     }, 1000); 
     // USING $WATCH FUNCTION 
     $scope.$watch('data'); 
}) 

Answer 1

setInterval außerhalb des Oszilloskops Winkel ist, so ist die Aussicht unawre Ihrer Änderungen. Verwenden Winkel Einbau-$interval, wie folgt aus:

empApp.controller('emp-table',function($scope, $interval) { 

$interval(function(){ 
     $scope.data.push({name: 'XYZ', joining_date:'2015-10-21',age: 21}) 
    }, 1000); 

nun in Bezug auf Ihre $watch Ausdruck - es ist derzeit Daten für alle Änderungen vorgenommen, um es zu beobachten. Unter Verwendung von setInterval werden $watch keine Änderungen in der Liste bemerken. mit setInterval

$scope.$watch('data', function(newValue, oldValue) { 
    console.log("current data: " + newValue); 
}); 

Answer 2

Das Problem ist richtig, aber nicht vollständig: Nach dem Umschalten auf $interval kann die $watch frei genutzt werden. Der Ausdruck $ scope. $ Watch überprüft die Eigenschaft $ scioe.data als Referenz, da Array.prototype.push das Array mutiert - Referenz ist nicht change und $ scope. $ Watch erkennt keine Änderungen. Zur Überwindung dieses Problems müssen Sie drittes Argument $ Uhr Methode zu übergeben - für tiefe Kontrolle:

$scope.$watch('data', function(newValue, oldValue) { 
    console.log("current data: " + newValue); 
}, true); 

Oder alternativ können Sie die Referenz von scope.data $ ändern (diese Option ist weniger Leistung teuer) zB:

$interval(function(){ 
    $scope.data = $scope.data.concat({name: 'XYZ', joining_date:'2015-10-21',age: 21}); 
}, 1000);