深究AngularJS——监听模型$watch

拓宇 2017-09-06

一.前言

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

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

三.监听一个函数的写法

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>angularJS watch</title>  
</head>  
<body>
    <div ng-app="myApp" ng-controller="control">
        <input type="text" set-Focus ng-blur="setBlur()">
        <button ng-click="getFocus()">获取焦点</button>
    </div>  
</body>
<script src="jquery-1.8.3.js"></script> 
<script src="angular1.2.9.js"></script>
<script src="app.js"></script>
</html>

app.js

//模型
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);;
         }
     };
}]);

四.监听多个数据的写法

两种: 

1.用+连接起来:$scope.$watch('obj.name+obj.age'); 

2.放进一个数组或对象中后,将第三个参数设为true,如:$scope.$watch('obj',function(){},true);

文章来源:http://blog.csdn.net/zcl_love_wx/article/details/51383548

相关推荐