AngularJS的一些指令会创建子作用域，而子作用域会继承自父作用域，大致可分为以下3种

1、创建子作用域并继承父作用域的指令

  • ng-repeat
  • ng-include
  • ng-switch
  • ng-controller
  • directive(scope:true)
  • directive(transclude:true)
2、创建子作用域但不继承父作用域
  • directive(scope:{...})
3、不创建作用域
  • directive(scope:false)
AngularJS的作用域继承是从上到下继承的，而且这种继承机制是和javascript继承一样的。如果子作用域继承了父作用域的一个基本类型的属性，那么子作用域修改这个基本类型属性将不会同步到父作用域，而是在子作用域中添加一个该属性一样名称的属性，这个属性会覆盖父类的同名属性；如果子作用域继承了父作用域的一个属性，这个属性的值是一个对象，那么子类在修改这个对象的时候就会按照原型链的方法去寻找这个属性，修改子类的该对象的值也会同步到父类，这是javascript一样的，因为继承的是对象的引用。
下面这个例子列举该种情况
<!DOCTYPE html>

<html ng-app="myApp">

<head>

	<meta charset="utf-8">

	<title>AngularJS</title>

</head>

<body>

	<div ng-controller="parent">

		parent-base:<input type="text" ng-model="base" />

		parent-obj:<input type="text" ng-model="obj.name">

		<div ng-controller="child">

			child-base:<input type="text" ng-model="base" />

			child-obj:<input type="text" ng-model="obj.name"/>

		</div>

	</div>

</body>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

	var app = angular.module("myApp", []);

	app.controller("parent", function(){})

	.controller("child", function(){});

</script>

</html>

在这个例子中，如果绑定的是对象的值，则父、子作用域可以相互影响，而如果绑定的是基本类型的值，则一旦改变child-base输入框的值，则就会在child的scope创建一个base属性，这个属性会覆盖parent的base，则父、子就不会相互影响了。为避免这种情况，强烈推荐使用.的对象形式绑定值。


ng-include和ng-switch和上面的ng-controller差不多，ng-repeat和这3个指令不同，它会对生成的每一项都创建一个子作用域，且这些子作用域都继承自一个父作用域。
<!DOCTYPE html>

<html ng-app="myApp">

<head>

	<meta charset="utf-8">

	<title>AngularJS</title>

</head>

<body>

	<div ng-controller="parent">

		<div>

			arr:{{arr[0]}}

		</div>

		<ul ng-repeat = "age in arr">

			<li>

				<input ng-model="age">

			</li>

		</ul>

		<div>

			obj-arr:{{obj[0].age}}

		</div>

		<ul ng-repeat = "age in obj">

			<li>

				<input ng-model="age.age">

			</li>

		</ul>

	</div>

</body>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

	var app = angular.module("myApp", []);

	app.controller("parent", function($scope){

		$scope.arr = [1,2];

		$scope.obj = [{age:1},{age:2}];

	});

</script>

</html>

运行代码之后可以知道，ng-repeat会为每一项创建一个子作用域，它用age来遍历数组，然后子作用域会创建一个用age做属性名的属性，如果age是基本类型，则改变age不会同步到父作用域，如果是对象，则父作用域也会跟着改变。


下面是directive中scope设置不同值时的情况。
当scope=false时，这时自定义没有产生新的作用域，仍旧使用controller的作用域，从运行结果可知，虽然我们设置的name是一个基本类型，但是当输入框中的值改变时，显示的值也会跟着变化，这是因为它们的都是引用同一个scope。
<!DOCTYPE html>

<html ng-app="myApp">

<head>

	<meta charset="utf-8">

	<title>AngularJS</title>

</head>

<body>

	<div ng-controller="parent">

		<div ng-bind="name"></div>

		<div my-name></div>

	</div>

</body>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

	var app = angular.module("myApp", []);

	app.controller("parent", function($scope){

		$scope.name = "Jhon";

	}).directive("myName", function(){

		return {

			restrict:"A",

			scope:false,

			template:'<input type="text" ng-model="name"/>'

		}

	});

</script>

</html>

当scope=true时，这个时候会产生新的作用域，并且该子作用域继承自父作用域，从下面实例，我们仍然改变输入框的值，但是显示的值并没有改变，这和上诉内置指令的原理是一样的。

<!DOCTYPE html>

<html ng-app="myApp">

<head>

	<meta charset="utf-8">

	<title>AngularJS</title>

</head>

<body>

	<div ng-controller="parent">

		<div ng-bind="name"></div>

		<div my-name></div>

	</div>

</body>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

	var app = angular.module("myApp", []);

	app.controller("parent", function($scope){

		$scope.name = "Jhon";

	}).directive("myName", function(){

		return {

			restrict:"A",

			scope:true,

			template:'<input type="text" ng-model="name"/>'

		}

	});

</script>

</html>

当scope={...}时，这时会产生一个独立的作用域，该作用域独立于任何作用域之外，不继承任何原型。但是可以通过@，=，&来和父作用域通信。

<!DOCTYPE html>

<html ng-app="myApp">

<head>

	<meta charset="utf-8">

	<title>AngularJS</title>

</head>

<body>

	<div ng-controller="parent">

		<div ng-bind="name"></div>

		<div my-name show-name="name"></div>

	</div>

</body>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

	var app = angular.module("myApp", []);

	app.controller("parent", function($scope){

		$scope.name = "Jhon";

	}).directive("myName", function(){

		return {

			restrict:"A",

			scope:{

				title:'=showName'

			},

			template:'<input type="text" ng-model="title"/>'

		}

	});

</script>

</html>

注意：这里虽然我们使用了基本类型，但是父作用域的值还是会随着输入框的改变而改变，这与其它的继承不同。


虽然独立作用域没有继承任何原型，但我们还是能够使用$parent.
<!DOCTYPE html>

<html ng-app="myApp">

<head>

	<meta charset="utf-8">

	<title>AngularJS</title>

</head>

<body>

	<div ng-controller="parent">

		<div ng-bind="name"></div>

		<div my-name></div>

	</div>

</body>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

	var app = angular.module("myApp", []);

	app.controller("parent", function($scope){

		$scope.name = "Jhon";

	}).directive("myName", function(){

		return {

			restrict:"A",

			scope:{

			},

			template:'<input type="text" ng-model="$parent.name"/>'

		}

	});

</script>

</html>

当transclude=true时，transclude会创建自己的作用域，这个作用域继承了自定义指令外的作用域，所以下例输出mery，Jhon。

<!DOCTYPE html>

<html ng-app="myApp">

<head>

	<meta charset="utf-8">

	<title>AngularJS</title>

</head>

<body>

	<div ng-controller="parent">

		<my-name>

		<span>{{name}}</span>

		</my-name>

	</div>

</body>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

	var app = angular.module("myApp", []);

	app.controller("parent", function($scope){

		$scope.name = "Jhon";

	}).directive("myName", function(){

		return {

			restrict:"EA",

			transclude:true,

			scope:{

			},

			template:'<div>{{name}}</div><div ng-transclude></div>',

			link: function(scope){

				scope.name = "mery";

			}

		}

	});

</script>

</html>








angular之scope详解的更多相关文章

  1. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  2. 【转】angular中$parse详解教程

    原文: https://yq.aliyun.com/ziliao/40516 ------------------------------------------------------------- ...

  3. Maven依赖中的scope详解，在eclipse里面用maven install可以编程成功，到服务器上用命令执行报VM crash错误

    Maven依赖中的scope详解 项目中用了<scope>test</scope>在eclipse里面用maven install可以编译成功,到服务器上用命令执行报VM cr ...

  4. Angular 6.X CLI(Angular.json) 属性详解

    Angular CLI(Angular.json) 属性详解 简介 angular cli 是angular commond line interface的缩写,意为angular的命令行接口.在an ...

  5. spring中的scope详解

    spring容器中的bean默认是单例模式的,改成非单例模式需要在类上加上@Scope("prototype") 1. scope概论 spring中scope是一个非常关键的概念 ...

  6. angular $q promise详解

    前言 通过本文,你大概能清楚angular promise是个啥,$q又是个啥,以及怎么用它.这里咱们先灌输下promise的思想. 下面写的全是废话,一些看着高逼格其实没什么大作用的概念,想知道$q ...

  7. Angular依赖注入详解

    Angular算是将后端开发工程化引入前端的先驱之一,而Dependency injection依赖注入(后面简称为DI)又是Angular内部运作的核心功能,所以要深入理解Angular有必要先理解 ...

  8. angular自定义指令详解

    指令(directive)是angular里面最核心也是最难懂的东西,在慕课网看了下大漠穷秋老湿的视频,自己百度半天做了一些小test,总算把一切都搞明白了. 先列出学习来源: 指令中controll ...

  9. AngularJs指令配置参数scope详解

    AngularJs最重要也是最难理解的模块之一就是它的指令(directive)了,自定义指令配置有很多个参数,下面我只说说其中scope的配置极其含义. scope表示指令的作用域,它有三个可选值: ...

随机推荐

  1. 使用Spring的JavaConfig 和 @Autowired注解与自动装配

    1 JavaConfig  配置方法 之前我们都是在xml文件中定义bean的,比如: 1 2 3 4 5 6 7 8 <beans xmlns="http://www.springf ...

  2. Jmeter运行结果分析

    1.聚合报告 以上就是我们所关心的结果 Label:页面或请求名称 Samples:运行的线程数(也可理解为请求数) Average:平均响应时间 Median:响应时间的中值 90% Line:90 ...

  3. Eclipse Oxygen 解决 自动导包的问题

    换成了 Eclipse 的Oxygen 版本 , 发现之前好用的自动导包功能不能用了 (Ctrl+Shift+O) 再 网上看资料  上面说 将  In Windows 替换为Editing Java ...

  4. 翻译连载 | 第 9 章：递归（上）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  5. python基础之七种运算符

    废话不多说,上节说的是数据类型,本篇讲讲数据运算. 在算式"1+2"中,"1"和"2"被称为操作数,"+"被称为运算符 ...

  6. 多线程进阶---Thread.join()/CountDownLatch.await() /CyclicBarrier.await()

    Thread.join() CountDownLatch.await() CyclicBarrier.await() 三者都是用来控制程序的"流动" 可以让程序"堵塞&q ...

  7. bzoj1027 [HNOI2004]打鼹鼠

    [HNOI2004]打鼹鼠 2014年5月2日2,8605 Description 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿Q编写了一个打鼹鼠 ...

  8. Redis 的安装与使用

    环境:CentOS 6.6 Redis 版本:redis-3.0 (考虑到 Redis3.0 在集群和性能提升方面的特性,rc 版为正式版的候选版,而且很快就出正式版) 安装目录:/usr/local ...

  9. 基于搜狗搜索的微信公众号爬虫实现（C#版本）

    Author: Hoyho Luo Email: luohaihao@gmail.com Source Url:http://here2say.me/11/ 转载请保留此出处 本文介绍基于搜狗的微信公 ...

  10. KM算法新识

    看了很多写的好的文章,但是针对代码注释来讲,这篇文章最合适.                                 如果人生会有很长,愿你的荣耀永不散场--wenr大牛. #include ...