angular中$watch踩的坑

最新推荐文章于 2024-08-01 09:17:58 发布

原创最新推荐文章于 2024-08-01 09:17:58 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

本文通过一个简单的AngularJS示例，介绍了如何使用双向绑定来实时更新视图与模型。通过对比不同版本的代码，展示了正确使用$watch监听变量变化的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>angular demo</title>
    <script src="../bower_components/angular/angular.min.js"></script>
</head>
<body>


    <div ng-controller="containerCtrl">
    <p>在输入框中输入</p>
    <p>姓名：<input type="text" ng-model="name"></p>

    <p >{{name}}</p>
    <p >{{sex}}</p>
    </div>
<script>
    var app = angular.module('myApp',[]);
    app.controller('containerCtrl',function($scope){
        /*$scope.$watch($scope.name,function(name,oldname,scope){
            debugger;
            if (oldname=='123') {
                scope.sex='女'
            } else {
                scope.sex='男'
            }
        });*/
        $scope.sex = '男'
        $scope.$watch($scope.sex,function(newValue,oldValue){
           // var name =$scope.name;
            console.log(newValue);
            $scope.sex = newValue>18 ? '女' : '男';
        })
    });
   
</script>
</body>
</html>

这个时候$watch内部只执行一次console.log(newValue);

翻文档例子，整了半天才发现$watch第一个传参必须得是一个回调函数或方法
改之后：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>angular demo</title>
    <script src="../bower_components/angular/angular.min.js"></script>
</head>
<body>


    <div ng-controller="containerCtrl">
    <p>在输入框中输入</p>
    <p>姓名：<input type="text" ng-model="name"></p>

    <p >{{name}}</p>
    <p >{{sex}}</p>
    </div>
<script>
    var app = angular.module('myApp',[]);
    app.controller('containerCtrl',function($scope){
        /*$scope.$watch($scope.name,function(name,oldname,scope){
            debugger;
            if (oldname=='123') {
                scope.sex='女'
            } else {
                scope.sex='男'
            }
        });*/
        $scope.getSex = function(){
            return $scope.name
        };

        $scope.$watch($scope.getSex,function(newValue,oldValue){
           // var name =$scope.name;
            console.log(newValue);
            $scope.sex = newValue>18 ? '女' : '男';
        })
    });
   
</script>
</body>
</html>