$scope.$watch 动态变量监听-AngularJS数据监听

发布日期 目录 AngularJS

说到$scope.$watch的使用方法,大部分人都是如下使用的:

$scope.name = 'seebin';
$scope.$watch('name',function(newValue, oldValue){
    console.log('监听到name值变化:',$scope.name)
})

其实上面这种用法已经满足了大部分业务需求,可是最近遇到一种情况就是:要监听的值是动态生成的,可能一个可能多个,

可能是如下的情景:有一个列表,通过新增按钮不断的给列表添加对象数据,每个对象数据都有个输入的监听字段。可见通过第一种方法,已无法满足我们,因为监听的项是不固定的,代码显示为下面:

// 这是一个集合,用来动态接收添加进来的数据
$scope.list = [];
// 动态往数组里面push数据对象,而我们需要的是监听这个对象里面的name字段数据
// data 是一个对象,里面有个name字段以及其他字段
/**
    // data的数据结构
    data = {
        name: '',
        age: 12
    }
*/
$scope.add = function(data){
    $scope.list.push(data)
}

通过阅读源码,$watch方法的第一个参数,还可以传入一个函数,监听该函数返回的数据

比如:

$scope.name = 'seebin';
$scope.$watch(function(){
    return $scope.name;
},function(newValue, oldValue){
    console.log('监听到name值变化:',$scope.name)
})

有了这个方法,监听起来就方便了,改造后的代码:

$scope.list = [];
// 动态往数组里面push数据对象,而我们需要的是监听这个对象里面的name字段数据
// data 是一个对象,里面有个name字段以及其他
$scope.add = function(data){
    // 针对每个data.name都做一个监听
    $scope.$watch(function(){
        return data.name;
    },function(newValue, oldValue){
        console.log('动态监听到name值变化:',$scope.name)
    })

    $scope.list.push(data)
}

在项目中,过多的watch监听可能会影响性能,所以针对数组元素的移除,还需要销毁监听,对于销毁监听我们可以保存下watch的返回值,返回值是一个函数,执行这个函数,用来销毁监听,所以最终代码如下:

$scope.list = [];
$scope.add = function(data){
    // 对每个监听的返回值做下保存,用来销毁监听
    data.watch = $scope.$watch(function(){
        return data.name;
    },function(newValue, oldValue){
        console.log('动态监听到name值变化:',$scope.name)
    })

    $scope.list.push(data)
}
$scope.remove = function(index,data){
    // 销毁监听
    $scope.list[index].watch();
    // 从数组中移除
    $scope.list.splice(index, 1);
}

2 条评论发表在 “$scope.$watch 动态变量监听-AngularJS数据监听

发表评论

邮箱地址不会被公开。