大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员。
今天给大家分享一下，修真院官网js任务8中涉及的angular自定义指令DIRECTIVE的SCOPE属性。
分享人：郭婷婷
1.背景介绍
在AngularJS中，除了内置指令如ng-click等，我们还可以自定义指令。 自定义指令，是为了扩展DOM元素的功能。代码中，通过指定directive中的restrict属性，来决定这个指令是作为标签（E）、属性（A）、属性值（C）、还是注释（M）。 指令的定义过程就不详述了，可以参考其余小课堂。今天主要讲一下自定义指令中scope属性取值的区别。
2.知识剖析
scope这个属性用来修饰指令的作用域。 每当一个指令被创建的时候，都会有这样一个选择，是直接使用父作用域？ 还是创建一个从父作用域继承的子作用域？ 又或者是创建一个隔离的作用域（不依赖外部的作用域）？
SCOPE属性的3种取值
1、false（默认值）：直接使用父scope。
2、true：继承父scope
3、对象{ }：创建一个新的“隔离”scope，但仍可与父scope通信
隔离的scope，通常用于创建可复用的指令，也就是它不用管父scope中的model。 然而虽然说是“隔离”，但通常我们还是需要让这个子scope跟父scope中的变量进行绑定。绑定的策略有3种：
@：单向绑定，外部scope能够影响内部scope，但反过来不成立
=：双向绑定，外部scope和内部scope的model能够相互改变
&：把内部scope的函数的返回值和外部scope的任何属性绑定起来
3.常见问题
SCOPE属性的3种取值的具体影响
4.解决方案
1、false（默认值）：直接使用父scope。比较“危险”。
可以理解成指令内部并没有一个新的scope，它和指令以外的代码共享同一个scope。 我们创建的指令继承了父作用域的一切属性和方法，这也 使得在指令的模板中我们可以使用这些属性和方法。
因为我们将scope的属性设置为false所以，我们创建的指令继承了父作用域的一切属性和方法， 这也使得在指令的模板中我们可以使用这些属性和方法。
2、true：继承父scope
当把scope属性设置为true时，这表明我们创建的指令要创建一个新的作用域，这个作用域继承自我们的父作用域。 等等，刚才我们不是说了，当把scope属性值设置为false时，不也是继承我们的父作用域吗？不要急，我们先看下demo。
一开始是绑定在父scope中，但当修改位于自定义指令中的输入框时，子scope就被创建并继承父scope了。 之后，修改父scope并不能影响input的值，而修改子scope就可以改变input的值了。
1、当我们将scope设置为false的时候,我们创建的指令和父作用域（其实是同 一个作用域）共享同一个model模型，所以在指令中修改模型数据 ，它会反映到父作用域的模型中。
2、当我们将scope设置为true的时候，我们就新创建了一个作用域， 只不过这个作用域是继承了我们的父作用域；我觉得可以这样理解， 我们新创建的作用域是一个新的作用域，只不过在初始化的时候， 用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。
3、{ }：创建一个新的“隔离”scope，当我们将scope的属性设置为{}时，我们可以做更多的事情。
AngularJS最强的大的地方之一就是它可以构建组件，无论放在哪里都是可以使用的； 这所以可以做到这些，不得不归功于指令的这个属性； 当我们将scope设置为{}时，意味着我们 创建的一个新的与父作用域隔离的新的作用域，这使我们在不知道外部环境的情况下， 就可以正常工作，不依赖外部环境。
所以隔离的scope，通常用于创建可复用的指令，也就是它不用管父scope中的model。
我们使用了隔离的作用域，不代表我们不可以使用父作用域的属性和方法。 我们可以通过向scope的{}中传入特殊的前缀标识符（即prefix），来进行数据的绑定。 在创建了隔离的作用域，我们可以通过@,&,=引用应用指令的元素的属性。 绑定的策略有3种：@、=、&
1、@
单项绑定的前缀标识符
使用方法：在元素中使用属性，好比这样
， 注意，属性的名字要用-将两个单词连接，因为是数据的单项绑定所以要通过使用{{}}来绑定数据。
2、=
双向数据绑定前缀标识符
使用方法：在元素中使用属性，好比这样
,注意，数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。
3、&
绑定函数方法的前缀标识符
使用方法：在元素中使用属性，好比这样
， 注意，属性的名字要用-将多个个单词连接。
5.编码实战
6.扩展思考
我们的指令是如何利用这些前缀标识符来寻找我们想要的属性或者函数的？
@ 当指令编译到模板的name时，就会到scope中寻找是否含有name的键值对，如果存在，就像上面那样，看到@就知道 这是一个单向的数据绑定，然后寻找原来的那个使用指令的元素上（或者是指令元素本身）含有这个值的属性即my-name={{name}}， 然后在父作用域查找{{name}}的值，得到之后传递给模板中的name。
=和&与@差不多，只不过=进行的是双向的数据绑定，不论模板还是父作用域上的属性的值发生改变都会使另一个值发生改变，而&是绑定函数而已。
7.参考文献
参考一：AngularJS自定义指令directive：scope属性
参考二：一招制敌 - 玩转 AngularJS 指令的 Scope (作用域)
8 更多讨论
鸣谢
感谢大家观看
BY : 朱芳山/郭婷婷
PPT链接：https://ptteng.github.io/PPT/PPT/js-08-directive-scope.html
视频链接: https://pan.baidu.com/s/1i49IqSt 密码: nzh4
--------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
网友评论