深究AngularJS——监听模型$watch

Myth丶恋晨 2022-07-24 04:02 220阅读 0赞

# 前言 #

1.`$watch`是scope内置的函数，它的作用是用来监听数据的变化。  
2.`$watch`可监听哪些数据？  
单个对象的属性  
需要计算的结果（函数）  
3. 语法: `$scope.$watch(F,M,B);`

# 对$watch参数的了解 #

## F： ##

要监听的数据（表达式或函数的字符串），主要是监听这些数据改变没有。它会返回被监听数据的**当前值**。

## M： ##

当监听的数据发生变化时，就会调用M（它是函数或表达式）。如果是函数形多，则会接收到F的新旧两个值和作用域对象，示例：

$scope.$watch("formData",function(newValue,oldValue, scope) { 
          //这里是监听的数据发生变化后调用
          //formData是$scope.formData={};里的
         }
     }, true);

## B： ##

为true时：将会检查监听对象的每个属性是否发生变化。适用于监听数组或者监听的是一个对象上的所有属性。由于每次都要遍历监听对象的值是否发生变化，如果数组值过多，或对象属性多，那么一点点改变就会造成大量的遍历。

# 监听一个函数的写法 #

<body>
    
        <div ng-app="myApp" ng-controller="control">
            <input type="text" set-Focus ng-blur="setBlur()">
            <button ng-click="getFocus()">获取焦点</button>
        </div>  
    
    <script type="text/javascript"> //模型 var app = angular.module('myApp',[]); //控制器 app.controller("control",function($scope){ $scope.isFocus = false; //监听的函数，须返回当前值 $scope.method = function(){ return $scope.isFocus; } //点击获得焦点操作 $scope.getFocus = function(){ $scope.isFocus = true; $scope.method(); }; //失去点后，赋值为false可再次点击获得焦点 $scope.setBlur = function(){ $scope.isFocus = false; } }); //自定义指令 app.directive('setFocus',[ function(){ return { link:function(scope, element){ //监听的数据是一个函数，该函数必须先在父作用域定义 scope.$watch(scope.method,function(newValue,oldValue, scope) { if(newValue&& !oldValue){ element[0].focus(); //获取焦点 } }, true);; } }; }]); </script>
    </body>

# 监听多个数据的写法 #

**两种：**  
1.用+连接起来：`$scope.$watch('obj.name+obj.age');`  
2.放进一个数组或对象中后，将第三个参数设为true，如:`$scope.$watch('obj',function(){},true);`

# 使用watch的注意事项 #