угловая функция $ watch не работает с изменением модели

Question

Приветствую вас, я новый в угловой и застреваю при создании примера функции $watch. Я просто хочу подтолкнуть данные к существующим модальным данным (json data), и изменения в модели отразятся на view. Пожалуйста, проверьте мой код ниже или проверить 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 находится вне сферы угловых, таким образом вид является unawre ваших изменений. Используйте угловые встроенные $interval, как это:

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

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

Теперь относительно вашего выражения $watch - это в настоящее время наблюдает данные для каких-либо изменений, внесенных в него. Используя setInterval, $watch не заметит изменений, внесенных в список. После переключения на $interval$watch можно использовать свободно:

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

Answer 2

Проблема с setInterval является правильным, но не полностью. Выражение $ scope. $ Watch проверяет свойство $ scioe.data по ссылке, поскольку Array.prototype.push мутирует массив - ссылка не изменяется и $ scope. $ Watch не обнаруживает никаких изменений. Чтобы преодолеть эту проблему, нужно передать третий аргумент $ вахтовым методом - для глубокой проверки:

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

Или же вы можете изменить ссылку на $ scope.data (этот вариант менее дорогостоящим производительность) например:

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