AngularJS学习记录-作用域

最新推荐文章于 2018-03-14 22:59:00 发布

web_LamHo

最新推荐文章于 2018-03-14 22:59:00 发布

阅读量360

点赞数

分类专栏： Angular学习文章标签： AngularJS

本文链接：https://blog.csdn.net/web_LamHo/article/details/51378444

版权

Angular学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

AngularJS学习记录-作用域

作用域的特点

具体来说作用域分为以下3个特变

它提供了一个$watch方法来监听数据模型的变化，之所以能使用”ng-model”来实现数据双向绑定，就是通过调用该方法进行数据模型的监听，只要有一端发生变化，另外绑定的一段自动进行数据同步
它提供另外一个$apply方法，为各种类型的数据模型改变提供支撑，将它们引入到Angular可控制器的范围中
它为表达式提供了执行的环境，一个表达式必须在拥有该表达式属性的作用域中执行才更加合适，作用域通过提供$scope对象，使所有的表达式都拥有对应的执行环境，也就是上下文对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/angular.min.js"></script>
    <style>
        body{
            font-size:12px;
        }
        div{
            margin:8px 0;
        }
    </style>
</head>
<body ng-app="app" ng-controller="myCtr">
    <div>
        <input type="text" ng-model="name" placeholder="请输入姓名">
    </div>
    <div>
        累计变化次数：{{count}}
    </div>
</body>
<script>
     var app = angular.module('app',[]);

     app.controller('myCtr',['$scope',function($scope){

         $scope.count = 0;
         $scope.name = '';
         $scope.$watch('name',function(){
             $scope.count++;
         })

     }]);




</script>


</body>
</html>

源码解析：
在例子中，先定义两个$scope对象的属性"name"和"count"，前者用于使用"ng-model"制定绑定文本框中的内容，后者用于记录文本框中字符内容变化的累计次数。
然后，使用作用域中的$watch方法对$scope中的"name"属性进行监听，当该属性值变化时，将$scope中的"count"属性值累加1，所以，只要在文本框中做任何一次的修改，都会通过"count"属性值反馈至页面中。


之所以可以通过$watch方法监听模型数据发生的变化，主要是因为在Angular的内部，每当我们对已绑定"ng-model"指令的"name"属性进行修改时，其内部的$digest方法就会自动运行一次，检测已绑定的"name"属性是否与上一次$digest方法运行时获取的内容一直。如果不一致，则执行$watch方法绑定的处理函数，即将"count"属性值累加1。