angularJS $scope的$watch方法监听model改变

最新推荐文章于 2023-08-30 12:20:11 发布

xuanwuziyou

最新推荐文章于 2023-08-30 12:20:11 发布

阅读量6.4k

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/52798656

版权

angular 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

$scope有个$watch方法，可以监听指定的model的改变，一旦model改变则触发（执行）传入其中的方法，该方法接收三个参数，如下

$scope.$watch('要监听的model名' , function(newValue,oldValue){ }, bool值指示是否监听的是对象)，

其中newValue指向所监听的model，即两者是一回事，而oldValue则是所监听model此次改变前的拷贝。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstController">
        <input type="text" ng-model="name">
        改变次数：{{count}}  新值：{{ name }}
        <br><br>
        <input type="text" ng-model="data.name">
        改变次数：{{data.count}}  新值：{{ data.name }}
    </div>
</div>

<script>
    var app=angular.module('myApp',[]);
    app.controller("firstController",function($scope){
        $scope.name='张三';
        $scope.count=0;

        $scope.data={
            name:'李四',
            count:0
        };

        //监听模型name  name每次改变时 都会执行传入的函数
        //因为name不是对象，所以不必传第三个参数
        $scope.$watch('name',function(newValue,oldValue){
            $scope.count ++;
            if($scope.count > 30){
                $scope.name='已经大于30次了';
            }
        });

        //监听模型data  data每次改变时  都会执行传入的函数
        //设置$watch方法的第三个参数为true 指示监听的是一个对象（该对象的每个属性变化都执行函数）
        $scope.$watch('data',function(newValue,oldValue){
            console.log($scope.data === newValue); //永远是true
            console.log($scope.data === oldValue); //页面初始化后是true,data改变之后永远是false
            console.log('新值: '+newValue.name+' 旧值： '+oldValue.name);
        },true);
    });
</script>
</body>
</html>

页面执行结果：

xuanwuziyou

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularJS $scope的$watch方法监听model改变

$scope有个$watch方法，可以监听指定的model的改变，一旦model改变则触发（执行）传入其中的方法，该方法接收三个参数，如下$scope.$watch('要监听的model名' , function(newValue,oldValue){ }, bool值指示是否监听的是对象)，其中newValue指向所监听的model，即两者是一回事，而oldValue则是所监听mode
复制链接

扫一扫