Question

嗨朋友我在创建$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');
})

Answer 1

setInterval超出了角度的范围，因此视图对您的更改没有任何影响。使用内置角度$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没有检测到任何更改。要解决此问题，您需要将第三个参数传递给$ watch方法 - 进行深层检查：

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

或者您可以更改$ scope.data的引用（此选项的性能成本较低） e.g：

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

angular $ watch功能不适用于模型更改

2 个答案: