如何理解ANGULAR自定义指令DIRECTIVE的SCOPE属性？

最新推荐文章于 2020-04-28 18:41:41 发布

jierenjia

最新推荐文章于 2020-04-28 18:41:41 发布

阅读量311

点赞数

本文链接：https://blog.csdn.net/jierenjia/article/details/80471520

版权

大家好，我是IT修真院郑州分院第8期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网JS-5任务中可能会使用到的知识点：

HTTP状态码有哪些？分别代表是什么意思？

1.背景介绍

指令定义?

AngularJS与JQuery最大的区别表现在数据双向绑定，实质就是DOM的操作形式不一样。 JQuery通过选择器找到DOM元素，再赋予元素的行为；而AngularJS则是，将指令与DOM绑定在一起，再扩展指令的行为。例如， ng-click 可以让一个元素能够监听 click 事件，并在接收到事件的时候执行AngularJS表达式。我们可以自己创造新的指令。使用angular的directive( )这个模块是用来定义指令的。

2.知识剖析
一个完整的自定义指令所包含的内容

angular.module(...);

.directive('My-directive', function(injectables) {
restrict: 'A',
priority: 0,
template: '',
templateUrl: 'directive.html',
replace: false,
transclude: false,
scope: false,
compile: function(tElement, tAttrs, transclude) {
eturn {
pre：function preLink(scope, iElement, iAttrs, controller) { ... },
post：function postLink(scope, iElement, iAttrs, controller) { ... }
},
link: function(scope, iElement, iAttrs) { ... }
});

restrict（字符串）

restrict 是一个可选的参数。它告诉AngularJS这个指令在DOM中可以何种形式被声明。默认AngularJS认为 restrict 的值是 A ，即以属性的形式来进行声明。

restrict 值可以是以下几种:

E 作为元素名使用

A 作为属性使用

C 作为类名使用

M 作为注释使用

template （字符串或函数）

template 参数是可选的，必须被设置为以下两种形式之一：

 一段HTML文本；

 一个可以接受两个参数的函数，参数为 tElement 和 tAttrs ，并返回一个代表模板的字符串。

templateUrl，引入外部的一个html文件

3.常见问题

SCOPE属性的3种取值对指令有什么影响?

4 解决方案

scope属性的3种取值
①、false（默认值）：子级继承父级的值，改变父级的值，子级的值也随着改变，反之亦然，这就是继承且不隔离

②、true：子级继承父级的值，改变父级的值，子级的值也随着改变，但是改变子级的值，父级的值并没有改变，这就是继承但是隔离

③、对象{ }：没有继承父级的值，所以子级的值为空，改变任何一方的值都不会影响另一方，这就是不继承且隔离。

当我们将scope的属性设置为{}时，我们可以做更多的事情。

AngularJS最强的大的地方之一就是它可以构建组件，无论放在哪里都是可以使用的；之所以可以做到这些，不得不归功于指令的这个属性；当我们将scope 设置为{}时，意味着我们创建的一个新的与父作用域隔离的新的作用域，这使我们在不知道外部环境的情况下，就可以正常工作，不依赖外部环境。

然而虽然说是“隔离”，但通常我们还是需要让这个子scope跟父scope中的变量进行绑定。绑定的策略有3种：@、=、&。

1.@：单向绑定，外部scope能够影响内部scope，但反过来不成立；

使用方法：在元素中使用属性，好比这样 my-name="{{name}}"，注意，属性的名字要用-将两个单词连接，因为是数据的单项绑定所以要通过使用{{}}来绑定数据。

2、=：这是一个双向数据绑定前缀标识符,外部scope和内部scope的model能够相互改变；

使用方法：在元素中使用属性，好比这样 my-age="age",注意，数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。

3、&：这是一个绑定函数方法的前缀标识符,把内部scope的函数的返回值和外部scope的任何属性绑定起来。

使用方法：在元素中使用属性，好比这样 my-change="changeAge()"。

5.编码实战

PPT

视频

6.扩展思考

我们的指令是如何利用这些前缀标识符来寻找我们想要的属性或者函数的？

@ 当指令编译到模板的name时，就会到scope中寻找是否含有name的键值对，如果存在，就像上面那样，看到@就知道这是一个单向的数据绑定，然后寻找原来的那个使用指令的元素上（或者是指令元素本身）含有这个值的属性即my-name={{name}}，然后在父作用域查找{{name}}的值，得到之后传递给模板中的name。

=和&与@差不多，只不过=进行的是双向的数据绑定，不论模板还是父作用域上的属性的值发生改变都会使另一个值发生改变，而&是绑定函数而已。

7.参考文献
参考1：Angular directive 实例详解
https://segmentfault.com/a/1190000005851663

参考一：AngularJS 自定义指令

http://www.jb51.net/article/83051.htm

8 更多讨论

1 priority属性的作用？

priority
数字，可选参数，致命指令的优先级，若在单个DOM元素上有多个指令，则优先级高的先执行。

当然，设置指令的优先级不太常用，但是比较特殊的例子是，内置指令ng-repeat的优先级为1000，而ng-init的优先级为 450。

2.terminal作用？

terminal

布尔型，可选参数，可以被设置为true或者false，若设置为true，则优先级低于此指令的其他指令则无效，不会被调用优先级相同任然会执行。

3.templateUrl作用？

templateUrl，字符串或者函数，可选参数
可以使一个代表html文件路径的字符串，也可以是一个函数，大致意思与template一样。
在本地开发时，需要运行一个服务器，不然使用templateUrl会报错

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~