AngularJs中的作用域Scope

ren_qin

于 2015-03-13 16:43:31 发布

阅读量497

点赞数

分类专栏： AngularJs

AngularJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

作用域(Scope)

是一个存储应用数据模型的对象
为表达式提供了一个执行上下文
作用域的层级结构对应于 DOM 树结构
作用域可以监听表达式的变化并传播事件

index.html

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="MyController">
      Your name:
        <input type="text" ng-model="username">
        <button ng-click='sayHello()'>greet</button>
      <hr>
      
    </div>
  </body>
</html>

script.js

function MyController($scope) {
  $scope.username = 'World';

  $scope.sayHello = function() {
    $scope.greeting = 'Hello ' + $scope.username + '!';
  };
}

控制器： MyController ，它引用了 $scope 并在其上注册了两个属性和一个方法

$scope 对象：持有上面例子所需的数据模型，包括 username 属性、 greeting 属性（注：这是在 sayHello() 方法被调用时注册的）和 sayHello() 方法

那么具体整个示例有这样两个流程，从控制器发起的角度来看就是：

控制器往作用域中写属性：
- 给作用域中的 username 赋值，然后作用域通知视图中的 input 数据变化了，input 因为通过 ng-model 实现了双向绑定可以知道 username 的变化，进而在视图中渲染出改变的值，这里是 World
控制器往作用域中写方法
- 给作用域中的 sayHello() 方法赋值，该方法被视图中的 button 调用，因为 button 通过 ng-click 绑定了该方法，当用户点击按钮时，sayHello() 被调用，这个方法读取作用域中的 username 属性，加上前缀字符串 Hello，然后赋值给在作用域中新创建的 greeting 属性

作用域(scope) 对象以及其属性是视图渲染的唯一数据来源。

ren_qin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs中的作用域Scope

作用域(Scope)是一个存储应用数据模型的对象为表达式提供了一个执行上下文作用域的层级结构对应于 DOM 树结构作用域可以监听表达式的变化并传播事件index.html Your name: greet script.js
复制链接

扫一扫

专栏目录