2016-08-21 66 views
0

嗨,朋友我是新角度和陷入创建一个$watch功能的例子卡住。我只是想将数据推送到现有的模态(json数据)中,模型中的变化将反映到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'); 
}) 

回答

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); 
}); 
0

在使用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);