angularjs(step by step):scopes

最新推荐文章于 2017-07-04 16:57:45 发布

qq_19245589

最新推荐文章于 2017-07-04 16:57:45 发布

阅读量558

点赞数

CC 4.0 BY-SA版权

文章标签： scopes angular angularjs

本文链接：https://blog.youkuaiyun.com/qq_19245589/article/details/38641527

本文详细介绍了AngularJS中Scope的概念及其作用，包括监控表达式、传播事件等特性，并通过实例展示了如何利用$watch和$apply进行数据绑定及更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是scopes

官网上给出了两句话

an object that refers to the application model. 应用程序的模型对象

an execution context for expressions. 为表达式提供执行上下文

其实简单理解就是，数据对象存储区域

scope的作用：

watch expressions 监控表达式

propagate events 传播事件

2.scope特性

1.提供API $watch 去观察模型的变化

2.提供API $apply 将angular领域中的model的变化传播到view中去

scope定义了不同的应用组件对共享模型的访问权限，子scope可以继承父scope的属性，独立的scope则是独立的存在

scope为表达式提供上下文

比如{{who}}就是没有任何的意义，但是一旦在scope中定义了who这个属性，那么这个表达式将具有自己的价值

3.Scope 作为数据-模型

这时候，scope是controller和view之间的联系这就组成了一个典型的 mvc 模式

这个时候如果你在controller中定义了 $watch 的表达式，

那么这时候每当所监控的scope改变的时候，能够执行你需要执行的相关操作，并且它也会去更新dom里面所对应的值

  angular.module('Example', [])
    .controller('MyController', ['$scope', function($scope) {
      $scope.username = 'World';

      $scope.sayHello = function() {
        $scope.greeting = 'Hello ' + $scope.username + '!';
      };
      
      $scope.$watch('username',function(){
        console.log("username change:"+ $scope.username)
      })
       $scope.$watch('greeting',function(){
         console.log("greeting change:"+ $scope.greeting)
       })
    }]);

<body ng-app="Example">
    <div ng-controller="MyController">
    Your name:
      <input type="text" ng-model="username">
      <button ng-click='sayHello()'>greet</button>
    <hr>
    {{greeting}}
  </div>
</body>

使用上述的代码，可以了解 model的绑定大致过程

首先加载过程

username change:World

greeting change:undefined （这里是因为在angular中所有未定义对象，都会呗定义为undefined，以避免出现exception的出现）

改变username输出

username change:a

点击greet按钮的输出，

greeting change:Hello a!

首先运行到controller的js文件的的时候

首先会为当前的子controller定义一个子的scope

然后会去在template区域区域中检索出scope绑定的dom节点

然后会去定义 username和 sayHello这两个模型对象至于greetring 很明显这时候已经呗定义为 undefined对象

这时候由于数据对象内容发生了改变那么

触发apply传递出当前对象改变的事实，去改变scope所对应的dom节点事件，比如改变但前的text，以及表达式等等