使用$watch来监视属性或对象的变化

实例3：监听方法

//1.使用$watch来监视对象
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.user = { name: '张三', age: 10 };
    $scope.updated = 0;
    //使用监视方法，监视对象的部分属性
    $scope.$watch(function () {
        //监视方法，的值修改就会触发
        var newValue = $scope.user.age + ' ' + $scope.user.name;
        return newValue;
    }, function (newValue, oldValue) {
        console.info(newValue);
    });
    //使用2
    function loopOne() {
        console.info($scope.user.name);
    }
    $scope.$watch(function () {
        return $scope.user.name;
    }, loopOne);
});
           

1.Angular.Js $scope对象的$watch方法，三个参数

实例1:监听属性

<div class="container" ng-app="myApp" ng-controller="myCtrl">
        <form>
            <div class="form-group">
                <label>姓名：</label>
                <input class="form-control" ng-model="name" />
            </div>
        </form>
        <div class="alert alert-danger">
            姓名：{{name}}
            <br />
            修改次数{{updated}}
        </div>
    </div>
    <script type="text/javascript">
        //1.使用$watch来监视属性
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.name = "张三";
            $scope.updated = 0;
            $scope.$watch('name', function () {
                $scope.updated++;
                console.info($scope.updated);
            });
        });
    </script>
           

实例2：获取更新时的新值或旧值

<div class="container" ng-app="myApp" ng-controller="myCtrl">
        <form>
            <div class="form-group">
                <label>姓名：</label>
                <input class="form-control" ng-model="name" />
            </div>
        </form>
        <div class="alert alert-danger">
            姓名：{{name}}
            <br />
            修改次数{{updated}}
        </div>
    </div>
    <script type="text/javascript">
        //1.使用$watch来监视属性
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.name = "张三";
            $scope.updated = 0;
            $scope.$watch('name', function (newValue, oldValue) {
                console.info('new:'+newValue+"----old:"+oldValue);
                if (newValue == oldValue)
                    return;
                $scope.updated++;
            });
        });
    </script>
           

实例3：监听自定义对象

<div class="container" ng-app="myApp" ng-controller="myCtrl">
        <form>
            <div class="form-group">
                <label>姓名：</label>
                <input class="form-control" ng-model="user.name" />
            </div>
        </form>
        <div class="alert alert-danger">
            姓名：{{user.name}}
            <br />
            修改次数{{updated}}
        </div>
    </div>
    <script type="text/javascript">
        //1.使用$watch来监视对象
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.user = { name: '张三' };
            $scope.updated = 0;
            $scope.$watch('user', function (newValue, oldValue) {
                console.info(newValue);
                console.info(oldValue);
                if (newValue == oldValue)
                    return;
                $scope.updated++;
            }, true);
        });
    </script>