使用$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>