angularJS的$watch和$apply

浏览数：21 / 时间：2015年06月11日

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="fng">
    <div ng-controller="fc1">
        <div ng-bind="timeNow"></div>
        <div ng-bind="timeNow2"></div>
        <hr>
        <div ng-bind="test.count"></div>
        <div ng-bind="test.name"></div>
        <input type="button" value="增加" ng-click="add()"/>
    </div>
</body>
<script src="angular.js"></script>
<script>
    var ngApp=angular.module("fng",[]);
    ngApp.controller("fc1",[‘$scope‘,‘$http‘,function($scope){
        $scope.timeNow=new Date();

        setInterval(function(){
            //从一个宏观的角度来看$scope.$apply要比$scope.$watch的范围大得多
            /*
             * $scope.$apply方法内部给出要更新的$scope局部成员，
             * 这样才能触发ng的局部更新监听
             * （如果使用$digest的话那么整个$scope中的成员变化都会被监听，效率大大降低）
             * */
            $scope.$apply(function() {
                if (true) {
                    $scope.timeNow = new Date();
                    $scope.timeNow2 = new Date();
                }
            });
        });
        //=====================================================
        $scope.test={
            count:0,
            name:"小于10"
        };
        $scope.add=function(){
            $scope.test.count+=1;
        };
        //这是针对于你想跟踪一个你自己的成员而设计
        /*
        * $scope.$watch提供三个参数（对象成员/其他成员, 回调函数, （可选）*对象成员的属性*是否有变化）
        * 第三个参数如果不填，只有该对象变为数组或者其它类型才能触发回调函数
        * */
        $scope.$watch(‘test‘,function(){
            if($scope.test.count>10){
                $scope.test.name="大于10啦！";
            }
        },true);
    }]);
</script>
</html>