深究AngularJS——监听模型$watch_js angularjs中$watch 监听输入框最后值

作者：你好赵伟 | 2024-03-12 07:02:49

踩

js 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);1
2
3
4
5

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

监听多个数据的写法

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

使用watch的注意事项

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/222879