AngularJS开发指南4:指令的详解(3)

controller - 这个是指令内部的controller,跟angular中的controller不一样。它的作用是暴露此指令的一些方法给其他指令使用。这个控制器函数是在预编译阶段被执行的,并且它是共享的,这就使得指令间可以互相交流来扩大自己的能力。

require - 请求将另一个指令,假设为direct2,中的内部controller作为参数传入到当前指令的链接函数link中,这样在当前指令的link函数中,就可以调用direct2指令中的内部controller中定义的方法了。 这个请求需要传递被请求指令的名字。如果没有找到,就会触发一个错误。请求的名字可以加上下面两个前缀:

? - 不要触发错误,这只是一个可选的请求。

^ - 没找到的话,在父元素的作用域里面去查找有没有。

restrict - EACM中的任意一个字母。它是用来限制指令的声明格式的。如果没有这一项。那就只允许使用属性形式的指令。

E - 元素名称:<my-directive></my-directive>

A - 属性: <div my-directive="exp"> </div>

C - 类名:<div></div>

M - 注释: <!-- directive: my-directive exp -->

模板template - 将当前的元素替换掉。 这个替换过程会自动将元素的属性和css类名添加到新元素上。

模板地址templateUrl - 和template属性一样,只不过这里指示的是一个模板的URL。因为模板加载是异步的,所有编译和链接都会等到加载完成后再执行。

替换replace - 如果被设置成true,那么页面上指令内部里面的内容会被模板替换。比如:<hello><div>这是指令内部的内容</div></hello>,hello指令内部的div内容将会被模板替换掉。

transclude -  如果不想让指令内部的内容被模板替换,可以设置这个值为true。一般情况下需要和ngTransclude指令一起使用。 比如:template:"<div>hello every <div ng-transclude></div></div>",这时,指令内部的内容会嵌入到ng-transclude这个div中。也就是变成了<div>hello every <div>这是指令内部的内容</div></div>

编译compile - 这就是后面将要讲到的编译函数。

链接link - 这就是后面将要讲到的链接函数。

编译函数 Compile function

function compile(tElement, tAttrs, transclude) { ... }

编译函数是用来处理需要修改模板DOM的情况的。因为大部分指令都不需要修改模板,所以这个函数也不常用。需要用到的例子有ngTrepeat,这个是需要修改模板的,还有ngView这个是需要异步载入内容的。编译函数接受以下参数。

tElement - template element - 指令所在的元素。对这个元素及其子元素进行变形之类的操作是安全的。

tAttrs - template attributes - 这个元素上所有指令声明的属性,这些属性都是在编译函数里共享的。

transclude - 一个嵌入的链接函数function(scope, cloneLinkingFn)。

注意:在编译函数里面不要进行任何DOM变形之外的操作。 更重要的,DOM监听事件的注册应该在链接函数中做,而不是编译函数中。

编译函数可以返回一个对象或者函数。

返回函数 - 等效于在编译函数不存在时,使用配置对象的link属性注册的链接函数。

返回对象 - 返回一个通过pre或post属性注册了函数的对象。参考下面pre-linking和post-liking函数的解释。

链接函数 Linking function

function link(scope, iElement, iAttrs, controller) { ... }

链接函数负责注册DOM事件和更新DOM。它是在模板被克隆之后执行的,它也是大部分指令逻辑代码编写的地方。

scope - 指令需要监听的作用域。

iElement - instance element - 指令所在的元素。只有在postLink函数中对元素的子元素进行操作才是安全的,因为那时它们才已经全部链接好。

iAttrs - instance attributes - 实例属性,一个标准化的、所有声明在当前元素上的属性列表,这些属性在所有链接函数间是共享的。

controller - 控制器实例,也就是当前指令通过require请求的指令direct2内部的controller。比如:direct2指令中的controller:function(){this.addStrength = function(){}},那么,在当前指令的link函数中,你就可以通过controller.addStrength进行调用了。

Pre-linking function 在子元素被链接前执行。不能用来进行DOM的变形,以防链接函数找不到正确的元素来链接。

Post-linking function 所有元素都被链接后执行。

属性 Attributes

The Attributes object属性对象 - 作为参数传递给链接函数和编译函数。这使得下列资源可以被使用。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/bdbd967da56bc9cdf37fd9ee92e05d94.html