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. 随便讲讲我对于svn和git的想法

    1.SVN是集中式版本管理工具,而Git是分布式版本管理工具,这是核心区别. 二者都有集中的库,只是git偏向于分布式,用户可以再自己电脑上克隆一份自己的库,即使在断网的情况下也能够查看版本,创建分支 ...

  2. Unity Destory

    Object.Destroy     public static function Destroy(obj: Object, t: float = 0.0F): void; public static ...

  3. PHP中isset和empty的区别（最后总结）

    PHP的isset()函数 一般用来检测变量是否设置 格式:bool isset ( mixed var [, mixed var [, ...]] ) 功能:检测变量是否设置 返回值: 若变量不存在 ...

  4. websocket的理解及实例应用

    websocket协议是HTML5提出的一个新的规范,主要用于实现服务器及时推送信息给客户端的功能. websocket实现是基于HTTP协议的部分握手功能,但是websocket仅仅握手一次即可进行 ...

  5. TOP命令详解(负载情况)

    简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...

  6. maven编译时错误：无效的目标发行版

    (转)Maven 将依赖打进一个jar包 博客分类: maven   maven配置 <?xml version="1.0" encoding="UTF-8&quo ...

  7. hdu4081（秦始皇的道路系统）

    During the Warring States Period of ancient China(476 BC to 221 BC), there were seven kingdoms in Ch ...

  8. python GUI实战项目——tkinter库的简单实例

    一.项目说明: 本次通过实现一个小的功能模块对Python GUI进行实践学习.项目来源于软件制造工程的作业.记录在这里以复习下思路和总结编码过程.所有的源代码和文件放在这里: 链接: https:/ ...

  9. NDK各个版本链接

    ndk_r15c (July 2017) Windows 32-bit : https://dl.google.com/android/repository/android-ndk-r15c-wind ...

  10. SAP 图标查找及方法

    1. 图标查找 方法一:通过TCODE查找图标对应的图标名称 执行TCODE:ICON 查找图标对应的图标名称 方法二:通过方法一查出图标名称查找对应的图标ID SE11类型池根据方法一查找的ICON ...