如何理解angular自定义指令directive的scope属性

如何理解angular自定义指令directive的scope属性?

大家好,我是IT修真院北京分院第30期的学员黄苏威,一枚正直、纯洁、善良的前端程序员今天给大家分享一下,修真院官网js任务八深度思考中的知识点——如何理解ANGULAR自定义指令DIRECTIVE的SCOPE属性?

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) {

return {

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文件

指令中的SCOPE

directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性。

通常使用这种直接共享的方式可以实现一些简单的 directive 功能。但是当要创建一个可以重复使用的

directive的时候, 就不能依赖于父scope了,因为在不同的地方使用directive对应的父scope不一样。

所以需要一个隔离的scope。

2.2 scope属性的3种取值

①、false(默认值):直接使用父scope。

②、true:继承父scope

③、对象{ }:创建一个新的“隔离”scope,但仍可与父scope通信。隔离的scope,通常用于创建可复用的指令,也就是它不用管父scope中的model。然而虽然说是“隔离”,但通常我们还是需要让这个子scope跟父scope中的变量进行绑定。绑定的策略有3种:@、=、&。

@ 这是一个单项绑定的前缀标识符

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

= 这是一个双向数据绑定前缀标识符

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

& 这是一个绑定函数方法的前缀标识符

使用方法:在元素中使用属性,好比这样 my-change="changeAge()",注意,属性的名字要用-将多个个单词连接。

指令中的 CONTROLLER , COMPILE , LINK函数

AngularJs 的生命周期;分为两个阶段:

第一个阶段是编译阶段: 在编译阶段,AngularJS会遍历整个HTML文档并根据JavaScript中的指令定义来处理页面上声明的指令。

每一个指令的模板中都可能含 有另外一个指令,另外一个指令也可能会有自己的模板。当AngularJS调用HTML文档根部的指令时,

会遍历其中所有的模板,模板中也可能包 含带有模板的指令.一旦对指令和其中的子模板进行遍历或编译,

编译后的模板会返回一个叫做模板函数的函数。我们有机会在指令的模板函 数被返回前,对编译后的DOM树进行修改。

第二个阶段是链接阶段:链接函数来将模板与作用域链接起来;负责设置事件监听器,监视数据变化和实时的操作DOM.链接函数是可选的。

如果定义了编译函数,它会返回链接函数,因此当两个函数都定义了时,编译函数会重载链接函数

指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为,但链接函数只能在当前内部指令中定义行为,

且无法在指令间复用.link函数可以将指令互相隔离开来,而controller则定义可复用的行为。

3.常见问题

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

4.解决方案

每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{};默认情况下是false。

当scope参数被设置为false时有什么情况发生在这种情况下,在指令模板中可以直接使用父作用域中的变量,函数

因为我们将scope的属性设置为false所以,我们创建的指令继承了父作用域的一切属性和方法,这也使得在指令的模板中我们可以使用这些属性和方法。

注意:此时我们在输入框里改变名字,会发现上面的两个名字都发生了变化

4.2 scope = true。

当把scope属性设置为true时,这表明我们创建的指令要创建一个新的作用域,这个作用域继承自我们的父作用域。

修改上面的JS代码,将指令中的:scope:false修改为scope:true "

然后我们再试着在我们的input输入框中写一些字符串,会发现,指令中的那个name发生了变化,但是指令外的那个name却没有发生变化,这说明了一个问题。

当我们将scope设置为true的时候,我们就新创建了一个作用域,只不过这个作用域是继承了我们的父作用域;我觉得可以这样理解,我们新创建的作用域是一个新的作用域,只不过在初始化的时候,用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。

当我们将scope设置为false的时候,我们创建的指令和父作用域(其实是同一个作用域)共享同一个model模型,所以在指令中修改模型数据,它会反映到父作用域的模型中。

4.3 scope = {}

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

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

我们使用了隔离的作用域,不代表我们不可以使用父作用域的属性和方法。

我们可以通过向scope的{}中传入特殊的前缀标识符(即prefix),来进行数据的绑定。

在创建了隔离的作用域,我们可以通过@,&,=引用应用指令的元素的属性

下面我们来看看如何使用这些前缀标识符:

1.@:单向绑定,外部scope能够影响内部scope,但反过来不成立;

这是一个单项绑定的前缀标识符。使用方法:在元素中使用属性,好比这样注意,属性的名字要用-将两个单词连接,因为是数据的单项绑定所以要通过使用{{}}来绑定数据。

2、=:双向绑定,外部scope和内部scope的model能够相互改变;

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

3、&:把内部scope的函数的返回值和外部scope的任何属性绑定起来。

这是一个绑定函数方法的前缀标识符。使用方法:在元素中使用属性,好比这样

注意,属性的名字要用-将多个个单词连接。

5.编码实战

6.扩展思考

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

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

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

7.参考文献

参考一:AngularJS 自定义指令

参考二:一招制敌 - 玩转 AngularJS 指令的 Scope (作用域)

8.更多讨论

Q1:

讲一下指令中的controller和link的区别?

A1:

指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为,但链接函数只能在当前内部指令中定义行为,且无法在指令间复用.link函数可以将指令互相隔离开来,而controller则定义可复用的行为。

实际使用的一些建议:

如果我们希望将当前指令的API暴露给其他指令使用,可以使用controller参数,否则可以使用link来构造当前指令元素的功能性。如果我们使用了scope.$watch()或者想要与DOM元素做实时的交互,使用链接会是更好的选择。

Q2:

操作dom的内容放在link中,那么在link中是怎么操作dom的?

A2:

Q3:

scope:false和scope{x:‘=’}的区别

A3:

scope:false是作用域内所有的属性都双向绑定,而scope:{x:‘=’}只对设置等号的属性进行双向绑定!



阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭