美文网首页
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