Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象,有可用的方法和属性。

Scope 可应用在视图和控制器上。

当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递:

  1. <div ng-app="myApp" ng-controller="myCtrl">
  2. <h1>{{carname}}</h1>
  3. </div>
  4. <script>
  5. var app = angular.module('myApp', []);
  6. app.controller('myCtrl', function($scope) {
  7. $scope.carname = "Volvo";
  8. });
  9. </script>

AngularJS 应用组成如下:

  • View(视图), 即 HTML。
  • Model(模型), 当前视图中可用的数据。
  • Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。



所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

  1. <div ng-app="myApp" ng-controller="myCtrl">
  2. <h1>{{lastname}} 家族成员:</h1>
  3. <ul>
  4. <li ng-repeat="x in names">{{x}} {{lastname}}
  5. </ul>
  6. </div>
  7. <script>
  8. var app = angular.module('myApp', []);
  9. app.controller('myCtrl', function($scope, $rootScope) {
  10. $scope.names = ["Emil", "Tobias", "Linus"];
  11. $rootScope.lastname = "Refsnes";
  12. });
  13. </script>

监听器

$watch简单使用

$watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下:

  1. watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

  2. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用)

  3. objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它




最新文章

  1. selenium 等待页面加载完成
  2. 【Oracle XE系列之二】PLSQL Developer 远程连接Oracle XE数据库
  3. 返璞归真vc++之字符类型
  4. ASP.NET通用权限组件思路设计
  5. Objective-C官方文档翻译 Block
  6. 根据图像路径,创建CBitmap对象的方法
  7. (cljs/run-at (-&gt;JSVM :browser) &quot;语言基础&quot;)
  8. 怎么让html中 还是显示&lt;button&gt; 而不进行编译
  9. java求最大值以及定义方法调用
  10. python字符串与列表的相互转换
  11. mysql 动态增加列,查找表中有多少列,具体什么列。 通过JSON生成mysql表 支持子JSON
  12. 扩展方法 C#
  13. [TensorBoard] Train and Test accuracy simultaneous tracking
  14. [MyBean说明书]-添加IApplicationContextEx01接口手动加载库文件
  15. python模块之pyMySql
  16. first-child伪类选择器
  17. jmeter 请求发送加密参数
  18. Jmeter BeanShell 引用变量报错jmeter.util.BeanShellInterpreter: Error invoking bsh method: eval Parse error at line 14, column 181 : Error or number too big for integer
  19. vue里的tab标签
  20. js和jq获取父,兄弟,子节点

热门文章

  1. 拷贝构造函数(深拷贝vs浅拷贝)
  2. 简单的Queue
  3. JAVA项目中公布WebService服务——简单实例
  4. oracle存储过程的使用
  5. ubuntu14.04无法安装Curl
  6. UVA - 1471 Defense Lines 树状数组/二分
  7. UVA 1541 - To Bet or Not To Bet 记忆化DP概率
  8. lightoj--1410--Consistent Verdicts(技巧)
  9. http server优雅启停原理及验证
  10. Oracle中的数据字典技术及常用数据字典总结