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检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它




angular-Scope的更多相关文章

  1. angular $scope对象

    $scope是一个pojo对象 $scope提供了一些工具方法.例如:$watch() $apply(),一般不会手工去调用 $scope是表达式的执行环境也叫作用域 $scope是一个树形结构,与D ...

  2. Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

    Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...

  3. [AngularJS] Using the Angular scope $destroy event and method

    With Angular scopes, you have access to a $destroy event that can be used to watch $scope events. Th ...

  4. Angular $scope和$rootScope

    <!DOCTYPE html><html ng-app='myModule'><head lang="en"> <meta charset ...

  5. angular $scope.$watch

    在$scope内置的所有函数中,用得最多的可能就是$watch 函数了.当你的数据模型中某一部分发生变化时,$watch函数可以向你发出通知. 你可以监控单个对象的属性,也可以监控需要经过计算的结果( ...

  6. Angular Scope解析与应用

    Scope层级结构 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA== ...

  7. Angular之 Scope和 Directive

    ---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...

  8. ANGULAR JS WATCH监听使用(详)

    ANGULAR 监听使用: 当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件. $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. ...

  9. 【原创】angularjs1.3.0源码解析之scope

    Angular作用域 前言 之前我们探讨过Angular的执行流程,在一切准备工作就绪后(我是指所有directive和service都装载完毕),接下来其实就是编译dom(从指定的根节点开始遍历do ...

  10. angular 自定义指令 link

    function link(scope, element, attrs) { ... } where: scope is an Angular scope object. element is the ...

随机推荐

  1. ASP.NET中的Webconfig 和 Global.asax区别

    Web.Config与Global.asax的区别: Config可以根据不同的错误类型定义不同的错误页,网站重定义转向新的错误页面. Global,在全局错误中写入应用程序事件错误信息,并在当前页输 ...

  2. 【Web API系列教程】3.4 — 实战:处理数据(处理实体关系)

    前言 本部分描写叙述了EF怎样载入相关实体的细节,而且怎样在你的模型类中处理环形导航属性.(本部分预备了背景知识,而这不是完毕这个教程所必须的.你也能够跳到第五节) 预载入和延迟载入 预载入和延迟载入 ...

  3. Linux安装vmtools

    unbantu下,先把DVD的Vmwarew.gz,文件拷贝到tmp文件.然后 tar zxf VMware Tools-0....... ls cd ./intall.pl 有个文件,先拷贝到roo ...

  4. linux虚拟机网络设置(本机使用wiff,自己的网)

      一.linux虚拟机网络设置(https://jingyan.baidu.com/album/4e5b3e1957979d91901e24f1.html?picindex=16) 选中虚拟机,点击 ...

  5. 朴素贝叶斯python实现

    概率论是非常多机器学习算法基础,朴素贝叶斯分类器之所以称为朴素,是由于整个形式化过程中仅仅做最原始.简单的如果. (这个如果:问题中有非常多特征,我们简单如果一个个特征是独立的.该如果称做条件独立性, ...

  6. 转:Oracle GoldenGate学习之Goldengate介绍

    转自:http://blog.sina.com.cn/s/blog_a32eff28010136d9.html 日志或归档日志获得数据的增删改变化,再将这些变化应用到目标数据库,实现源数据库与目标数据 ...

  7. HDU 5654 xiaoxin and his watermelon candy 离线树状数组

    xiaoxin and his watermelon candy Problem Description During his six grade summer vacation, xiaoxin g ...

  8. php面向对象之get和set方法

    php面向对象之get和set方法 简介 1.自己写get或者set 2.用系统的魔术方法__get和__set 代码 <?php class Person{ private $userName ...

  9. Docker私服仓库Harbor安装

    Harbor安装那里还是很简单,就是在Docker Login那里掉坑里去了,搞半天,写博客的时候,又重新安装了一遍 1.准备两台服务器 centos7 harbor 10.19.46.15 clie ...

  10. 【转】C#详解值类型和引用类型区别

    通用类型系统 值类型 引用类型 值类型和引用类型在内存中的部署 1 数组 2 类型嵌套 辨明值类型和引用类型的使用场合 5 值类型和引用类型的区别小结   首先,什么是值类型,什么是引用类型? 在C# ...