说到$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);
}