深究AngularJS——监听模型$watch
一.前言
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
相关推荐
youyouzouzou 2014-05-30
zbwroom 2014-05-30
lizean 2016-12-19
princejingyun 2016-12-14
youyouzouzou 2017-02-24
lizean 2017-09-06
拓宇 2017-09-06
问题描述在编写导入指令的时候，需要将函数绑定到指令中，并传入一个参数。<button ng-hide="importing" class="btn btn-warning btn-sm" type="
kkkder 2019-06-29
youyouzouzou 2017-09-09
Oranq 2017-09-06
CrazyDogWang 2017-02-24
zhenghao 2016-12-19
CrazyDogWang 2016-12-14
Oranq 2016-11-14
CrazyDogWang 2016-07-22
Oranq 2016-06-15
xingdongfang 2019-11-10
zhenghao 2014-05-30
zbwroom 2014-05-29