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. 【SQL】- 基础知识梳理（三） - SQL连接查询

    一.引言 有时为了得到一张报表的完整数据,需要从两个或更多的表中获取结果,这时就用到了"连接查询". 二.连接查询 连接查询的定义: 数据库中的表通过键将彼此联系起来,从而获取这些 ...

  2. jmeter 压测最近的心得体会

    笔者14年入坑测试,截止到17年年初一直在游戏公司,压测,我都没有怎么用过,特别是jmeter去压测,自己学习,可是先找到切入点,于是乎, 其实也算是我学习后,先找一个更大的平台吧,我聊了几个游戏公司 ...

  3. .NetCore之下载文件

    本篇将和大家分享的丝.NetCore下载文件,常见的下载有两种:A标签直接指向下载文件地址和post或get请求后台输出文件流的方式,本篇也将围绕这两种来分享:如果对您有好的帮助,请多多支持. 允许站 ...

  4. Quartz源码——Quartz调度器的Misfire处理规则（四）

    Quartz调度器的Misfire处理规则 调度器的启动和恢复中使用的misfire机制,还需细化! SimpleTrigger的misfire机制 默认的 Trigger.MISFIRE_INSTR ...

  5. 【转】String字符串相加的问题

    String字符串相加的问题 前几天同事跟我说我之前写的代码中在操作字符串时候,使用字符串相加的方式而不是使用StringBuffer或者StringBuilder导致内存开销很大.这个问题一直在困扰 ...

  6. Rectangles hdu2461容斥定理

    Rectangles Time Limit: 5000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  7. tesseract-ocr字库训练图文讲解

    第一步合成图片集 你需要把使用jTessBoxEditor工具把你的训练素材及多张图片合并成一张tif格式的图片集 第二步  生成box文件 运行tesseract命令,tesseract mjorc ...

  8. vuejs2+axios设置

    http://www.cnblogs.com/wisewrong/p/6402183.html 1 当前项目安装axios $ cnpm i axios --save-dev 2 import axi ...

  9. webpack2使用ch7-loader解析css 自动添加浏览器前缀

    1 目录结构  安装的依赖 "autoprefixer": "^6.7.7", "css-loader": "^0.28.0&qu ...

  10. webpack html

    调用了原模板 修改路径 使html放在JS外面 可以传递参数 多个html指定对应chunks 除了某些模块其余的都被引入