第5章 作用域

通常AngularJS中应用（App）是由若干个视图（View）组合成而成的，而视图（View）又都是HTML元素，并且HTML元素是可以互相嵌套的，另一方面视图都隶属于某个控制器（Controller），进而控制器之间也必然会产生嵌套关系。

每个控制器（Controller）又都对应一个模型（Model）也就是$scope对象，不同层级控制器（Controller）下的$scope便产生了作用域。

5.1 根作用域

  • 一个AngularJS的应用（App）在启动时会自动创建一个根作用域$rootScope，这个根作用域在整个应用范围（ng-app所在标签以内）都是可以被访问到的。

5.2 子作用域

  • 通过ng-controller指令可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。

示例：

<body ng-app="App">

	<div class="box" ng-controller="ParentController">

		<nav>

			<a href="javascript:;">首页</a>

			<a href="javascript:;">列表</a>

		</nav>

		<div class="main" ng-controller="ChildController">

			<h4>{{name}}</h4>

		</div>

	</div>

	<script src="./libs/angular.min.js"></script>

	<script>

        /**

		 * 关于作用域：

		 * 新建一个函数就会产生一个新的作用域

         * 并且子作用域可以访问父级作用域，父级不

         * 能访问子级的

         */

		var App = angular.module('App', []);

		App.controller('ParentController', ['$scope', function ($scope) {

		    $scope.name = '小明';

        }]);

		App.controller('ChildController', ['$scope', function ($scope) {

		    $scope.name = '小红';

		}])

	</script>

</body>

AngularJS——第5章 作用域的更多相关文章

  1. AngularJS——第6章 作用域

    第6章 作用域 在AngularJS中使用过滤器格式化展示数据,在"{{}}"中使用"|"来调用过滤器,使用":"传递参数. 6.1 内置过 ...

  2. AngularJS 第三天----作用域

    作用域的概念及其功能 AngularJS使用作用域的概念来充当数据模型的作用,在视图和控制器之间起着桥梁的作用.由于双向绑定的数据特性,视图的修改会更新 $scope,同样对 $scope的修改也会重 ...

  3. 【AngularJS】—— 12 独立作用域

    前面通过视频学习了解了指令的概念,这里学习一下指令中的作用域的相关内容. 通过独立作用域的不同绑定,可以实现更具适应性的自定义标签.借由不同的绑定规则绑定属性,从而定义出符合更多应用场景的标签. 本篇 ...

  4. 《Python 学习手册4th》 第十七章 作用域

    ''' 时间: 9月5日 - 9月30日 要求: 1. 书本内容总结归纳,整理在博客园笔记上传 2. 完成所有课后习题 注:“#” 后加的是备注内容 (每天看42页内容,可以保证月底看完此书) “重点 ...

  5. 你不知道的javaScript上卷(第一章 作用域是什么)

    在写这篇博客时这本书我已经是看过一遍了,为了加深印象和深入学习于是打算做这系列的前端经典书籍导读博文,大家如果觉得这本书讲的好可以自己买来看看,我是比较喜欢看纸质版书的,因为这样才有读书的那种感觉. ...

  6. 一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

    学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是 ...

  7. AngularJS——第11章 其它

    第11章 其它 11.1jQuery 在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite,通过angular.element不能选择元素,但可以将一个DOM元素转成jQ ...

  8. AngularJS——第9章 模块加载

    第9章 模块加载 AngularJS模块可以在被加载和执行之前对其自身进行配置.我们可以在应用的加载阶段配置不同的逻辑. [AngularJS执行流程] 启动阶段(startup) 开始 --> ...

  9. AngularJS——第8章 服务

    第8章 服务 服务是一个对象或函数,对外提供特定的功能. 8.1 内建服务 1. $location是对原生Javascript中location对象属性和方法的封装. // $location内置服 ...

随机推荐

  1. kbengine：简单介绍

    之前想分析一个开源服务器很久了,思前想后,还是选择了kbengine. KBEngine的服务端底层框架使用c++编写,游戏逻辑层使用Python(支持热更新).现在服务器大多数是用C++做的,pyt ...

  2. 使用 Python 把多个 MP4 合成一个视频(转)

    这两天群里有个小伙伴有一个需求, 就是把很多个视频文件 合并成一个. 期间也找了各种软件, 如格式工厂, 但是只能一次合成50个文件, 小伙伴有几千个文件需要合成, 太繁琐; 又比如会声会影, 这个剪 ...

  3. Dictionary，hashtable, stl:map有什么异同？

    相同点:字典和map都是泛型,而hashtable不是泛型. 不同点:三者算法都不相同 Hashtable,看名字能想到,它是采用传统的哈希算法:探测散列算法,而字典则采用的是散列拉链算法,效率较高, ...

  4. js总结001

    JSTL 表达式与 EL 语言      http://leon906998248.iteye.com/blog/1502569 2   jquery中$each()方法的使用指南     http: ...

  5. 如何用jar命令生成可执行的jar文件

    如果你已经把zh.java文件生成了zh.class文件 如果zh.class的路径是bin/com/zhang/zh.class 则在bin目录下放一个manifest.mf文件,文件内容如下: M ...

  6. python pip 下载慢 配置使用国内源配置

    ubuntu apt 使用国内源 设置>软件和更新>下载自 选择mirrors.aliyun.com/ubuntu 更新源sudo apt-get update 安装系统包:sudo ap ...

  7. tensorflow 之tensorboard 对比不同超参数训练结果

    我们通常使用tensorboard 统计我们的accurate ,loss等,并绘制曲线,通常是使用一次训练中的, 但是,机器学习中通常要对比不同的 ‘超参数’给模型训练和预测能力的不同这时候如何整合 ...

  8. jquery iframe父子框架中的元素访问方法

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window. ...

  9. 2017秋季面向对象程序设计（Java）教材、教学纲要、考核要求

    教材简况 凯 S.霍斯特曼 (Cay S. Horstmann)(作者), 周立新(译者), Java核心技术(卷1):基础知识(原书第10版) , 2016年9月1出版 本书包括两卷,选做教材的是卷 ...

  10. JDK1.8 HashMap 扩容 对链表（长度小于默认的8）处理时重新定位的过程

    关于HashMap的扩容过程,请参考源码或百度. 我想记录的是1.8 HashMap扩容是对链表中节点的Hash计算分析. 对术语先明确一下: hash计算指的确定节点在table[index]中的链 ...