美文网首页
AngularJS 脏查询

AngularJS 脏查询

作者: what__ | 来源:发表于2017-07-24 20:13 被阅读0次

    脏查询的列举例子 以及自我理解

    <!DOCTYPE html>
    <html ng-app="myApp">
        <head>
            <meta charset="utf-8"/>
            <title>脏查询</title>
            <script type="text/javascript" src="./angular.min.js"></script>
        </head>
        <body ng-controller="myController">
            {{name}}
            <!-- 在页面中随意输入(也就是ng-model发生变化) 然后就能触发脏查询 -->
            <input type="" ng-model="a">
        </body>
        <script type="text/javascript">
        //脏查询机制和angular的双向绑定机制有关系
        //在视图中用ng-model绑定事件时都会创建 $watch(监听)==>$watchList(监听列表)
        //什么时候触发脏查询?  依赖angular的服务或者指令(ng-)
            angular.module("myApp",[])
            .controller("myController",["$scope","$timeout",function($scope,timeout){
                $scope.name="sang";
                // setTimeout(function(){//自己定义的查询
                //  //正常一秒后页面的值会发生变化 ,但是没有变,这是涉及到脏查询的机制
                //  $scope.name = "new name";//定时后一秒发生变化,页面并没有输出新值
                //  //console.log($scope.name)//在控制台输出新的值 
                //  //$scope.$apply();//angular提供的手动强制触发脏查询的方法,现在页面会自动出现
                // },1000)
    // -------------------------------------------------------------------------------------------------------
                //angular 中内置的触发脏查询的模块 现在不需要$apply来手动触发了
                //$interval 和 $timeout 是一样的
                $timeout(function(){
                    $scope.name = "new name"
                },1000);
    
                $scope.$watch("name",function(){//监听数据的变化
                    console.log(arguments)
                })
            }])
        </script>
    </html>```

    相关文章

      网友评论

          本文标题:AngularJS 脏查询

          本文链接:https://www.haomeiwen.com/subject/rmxikxtx.html