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. 【个人笔记】《知了堂》MySQL三种关系：一对一，一对多，多对多。

    一对一:比如一个学生对应一个身份证号.学生档案: 一对多:一个班可以有很多学生,但是一个学生只能在一个班: 多对多:一个班可以有很多学生,学生也可以有很多课程: 一对多关系处理: 我们以学生和班级之间 ...

  2. Linux下利用expect，不用交互模式，直接登陆远程主机

    Linux环境下只有在机器20.200.254.18上ssh dataconv@20.200.31.23才能连接到23的机器,而且还需要输入密码(每次都需要输入地址,密码很烦),所以利用expect写 ...

  3. [err] 1055

    本人mysql安装在ubuntu16.04上,mysql版本是5.7.19:在创建表和插入数据时报了 [Err] 1055 - Expression #1 of ORDER BY clause is ...

  4. 【POJ】2348 Euclid's Game（扩欧）

    Description Two players, Stan and Ollie, play, starting with two natural numbers. Stan, the first pl ...

  5. Find The Multiple （poj1426 一个好的做法）

    Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 16505   Accepted: 673 ...

  6. bzoj3997组合数学（求最长反链的dp）

    组合数学 给出一个网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右走.问至少走多少次才能将财宝捡完.此对此问题变形,假设每个格子中有好多财宝,而每一次经过一个格子至多只能捡走一块财宝,至少走 ...

  7. PHP和JS判断变量是否定义

    PHP中: 通过isset(变量名)来判断,定义返回true/未定义返回false JS中: 通过typeof来判断.

  8. IDL 字符串

    1.创建字符串 字符串和字符串数组通过赋值或函数方式来创建.在IDL字符串用" "或' '括起来表示. IDL> s1="abcdef" IDL> ...

  9. web容器启动后自动执行程序的几种方式比较

    1.       背景 1.1.       背景介绍 在web项目中我们有时会遇到这种需求,在web项目启动后需要开启线程去完成一些重要的工作,例如:往数据库中初始化一些数据,开启线程,初始化消息队 ...

  10. 最美时光第三方UWP源码公开

    自己大概写了一个星期的成果.. 使用了官方最美时光app的UI和图片资源,并没有调用官方接口 https://files.cnblogs.com/files/loyieking/NiceCountDo ...