我们使用ng的时候,经常会使用到指令,大家所熟知的属性我在这里就不介绍了,讲讲大家没怎么留意的属性

  1.multiElement

    这是指定指令作用区间的功能,最常用的就是ng-repeat-start和ng-repeat-end了。

  2.priority

    指令优先级,优先级越高,指令越早执行。

  3.terminal

    是否允许优先级低的指令起作用,如果是true,那么只有比当前指令或跟当前指令等级相同的指令才可以执行。最典型的就是ngIf

  4.templateNamespace

    声明模板的格式有三种选择 svg、html、math

  5.transclude

    或许有人疑问了,transclude也算是冷门属性吗?其实大家对transclude了解并没有想象的那么深,transclude是一个挺复杂的属性,一般大家会用到的也仅仅是true,false。这两个属性我在这里就不讲了,在这里我主要讲的是transclude:element,我google了一整天都没找到正确描述这个属性的方法。我觉得google出来的答案太文档化了。最后在研究$transclude才看出来这个属性的功能究竟在哪里。再讲功能前我们先了解下$transclude

    无论在指令的compile还是link时期我们的最后一个参数就是$transclude了,这里其实我们看看源码是如何定义的,我看的源码是ng1.5.3的    

function controllersBoundTransclude(scope, cloneAttachFn, futureParentElement, slotName) {var transcludeControllers;// No scope passed in:if (!isScope(scope)) {slotName = futureParentElement;futureParentElement = cloneAttachFn;cloneAttachFn = scope;scope = undefined;}if (hasElementTranscludeDirective) {transcludeControllers = elementControllers;}if (!futureParentElement) {futureParentElement = hasElementTranscludeDirective ? $element.parent() : $element;}if (slotName) {// slotTranscludeFn can be one of three things://  * a transclude function - a filled slot//  * `null` - an optional slot that was not filled//  * `undefined` - a slot that was not declared (i.e. invalid)var slotTranscludeFn = boundTranscludeFn.$$slots[slotName];if (slotTranscludeFn) {return slotTranscludeFn(scope, cloneAttachFn, transcludeControllers, futureParentElement, scopeToChild);} else if (isUndefined(slotTranscludeFn)) {throw $compileMinErr('noslot','No parent directive that requires a transclusion with slot name "{0}". ' +'Element: {1}',slotName, startingTag($element));}} else {return boundTranscludeFn(scope, cloneAttachFn, transcludeControllers, futureParentElement, scopeToChild);}}

还有一个另一个函数要特别指出来,就是最后返回的 boundTranscludeFn 这个方法,下面是他的源码

function createBoundTranscludeFn(scope, transcludeFn, previousBoundTranscludeFn) {function boundTranscludeFn(transcludedScope, cloneFn, controllers, futureParentElement, containingScope) {if (!transcludedScope) {transcludedScope = scope.$new(false, containingScope);transcludedScope.$$transcluded = true;}return transcludeFn(transcludedScope, cloneFn, {parentBoundTranscludeFn: previousBoundTranscludeFn,transcludeControllers: controllers,futureParentElement: futureParentElement});}

这两个方法到底是在做什么呢?其实就是克隆了当前指令的节点,并生成子作用域。克隆的节点由transclude定义,如果你的属性是true,则克隆的是指令模板中的ng-transclude所在的DOM节点,及其子节点。如果属性是element则克隆整个模板的节点。

这是两个指令的代码

 angular.module('MyApp', []).directive('dropPanel', function() {return {transclude: 'element',replace: true,template: "<div class='drop-panel'>" +"<span ng-transclude class='111'></span>" +"</div>",link: function(scope, el, c, d, $transclude) {$transclude(function ngRepeatTransclude(clone, scope) {console.log(clone);})}}}).directive('dropPanel2', function() {return {transclude: true,replace: true,template: "<div class='drop-panel'>" +"<span ng-transclude class='111'></span>" +"</div>",link: function(scope, el, c, d, $transclude) {$transclude(function ngRepeatTransclude(clone, scope) {console.log(clone);})}}})

如果你觉得replace干扰了对结果的理解,你可以注释掉,然后查看控制台中打印出来的clone,你就能知道所谓transclude的属性声明为element的作用了,我们打开replace目的在于能较清楚的查看DOM节点,来获得结论,下面就是两者编译后DOM节点的区别了

  看完上面的图,你可以明显的区别到两者对DOM的克隆不一样的,另外如果在声明属性为‘element’时,需要声明replace为true,才能渲染出来。我查了很多资料,最终用断点得出了我认为对的结论,断点追踪的结果是发现如果不声明replace,好像就不会执行ngTransclude指令,这点我很奇怪,正因为这样子所以导致没有成功渲染。二归根结底其实是两者的操作的DOM元素不同,在声明transclude为element时,replace为true,你取到的DOM节点是含有transclude属性的节点(子节点),而为false你拿到的并不是含有transclude属性的节点(父节点),而ng本身不对其节点进行遍历,导致没能执行ngTransclude指令

  我看到一个观点觉得不错,大概意思就是:源于功能的考虑,在使用element属性的时候,一般都是起占位符的作用,你需要做的操作是对DOM的添加时候,才会用到这个克隆功能。

  我觉得这个观点不错,看过很多关于ngrepeat的介绍,很多文章都说ngrepeat源码是通过$scope.$new()来生成子作用域的,实际上并不完全正确,他的确是通过$scope.$new产生子作用域的,但是这个产生功能是交给$transclude函数去做得,实际上ngrepeat的源码上是通过$transclude来生成子作用域和添加DOM节点的。与上面的观点有相似之处。

  就讲到这里了,这是作者原创,转载请注明

转载于:https://www.cnblogs.com/HeJason/p/5514690.html

angularJs关于指令的一些冷门属性相关推荐

  1. 如何在自定义指令中获取评估属性

    本文翻译自:How to get evaluated attributes inside a custom directive I'm trying to get an evaluated attri ...

  2. 如何在AngularJS的ng-options中设置value属性?

    本文翻译自:How do I set the value property in AngularJS' ng-options? Here is what seems to be bothering a ...

  3. AngularJS - 自定义指令

    这一篇从自定义指令出发,记录了定义一个指令时影响指令行为的各种因素. 试着感受这些因素,让自己更高效地编写AngularJS应用. Directive 先从定义一个简单的指令开始. 定义一个指令本质上 ...

  4. AngularJS自定义指令详解(有分页插件代码)

    前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指 ...

  5. angularjs directive scope变化为啥html,学习AngularJs:Directive指令用法(完整版)

    本教程使用AngularJs版本:1.5.3 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR ...

  6. angularJS 标签指令

    angularJS中除了ng开头的属性指令,还有标签指令.自定义指令等. 标签指令 :对原有的标签进行了重新的构建,并有了新的功能 <a>:阻止默认行为,阻止刷新页面 <select ...

  7. angularJS自定义指令详解

    AngularJS指令在HTML代码中可以有四种表现形式: 1.作为一个新的HTML元素来使用. <hello></hello>或者<hello/> 2.作为一个元 ...

  8. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html><head><meta charset="utf-8"><title>Ang ...

  9. CSS冷门属性 mix-blend-mode 制作文字镂空效果

    CSS冷门属性 mix-blend-mode 制作文字镂空效果 本篇文章为大家带来如何制作文字镂空效果,仅仅使用CSS样式进行处理,借助 mix-blend-mode 属性,将文字的颜色反转,从而实现 ...

最新文章

  1. 为什么我的子线程更新了 UI 没报错?借此,纠正一些Android 程序员的一个知识误区...
  2. ActiveReports for .NET 3 破解
  3. jQuery设置radio、select、checkbox只读属性后,如何在后台得到数据
  4. Spring Boot + JSP 创建web项目
  5. 信息学奥赛一本通(C++)在线评测系统——基础(一)C++语言—— 1050:骑车与走路
  6. sockjs.js:1609 GET http://192.168.1.119:8080/sockjs-node/info?t=1617976777339 net::ERR_CONNECTION_TI
  7. 容器编排技术 -- Kubernetes Volume
  8. 李廷伟:可穿戴技术引领物联网创新新浪潮
  9. python图像识别坐标转换成g代码_python - 将坐标系导出为ESPG代码:to_epsg()或ExportToEPSG() - SO中文参考 - www.soinside.com...
  10. 大数据与商业地理分析
  11. 字符串的HashCode可能相同
  12. 学习资料:8大行业,30个大数据实践案例分享
  13. 【转】GitHub客户端操作1--仓库相关操作github团队协作流程
  14. flash cs4 无法调试
  15. 计算机房维修保养记录表,机房设备系统运行及维护记录学习表格.docx
  16. 渲染巨匠(lightscape) 3.2 SP1 汉化版
  17. 思维导图网页版推荐,这两个网站建议收藏
  18. android 字符串缩进换行换行,Android Textview第二行缩进/悬挂缩进
  19. 对英雄联盟比赛预测(三)- 数据获取Java实现
  20. linux解冻用户的密码,linux – 透明地冻结和解冻进程?

热门文章

  1. 【CodeForces - 510D】Fox And Jumping(dp,stlmap,数论的性质)
  2. Coursera自动驾驶课程第1讲:Welcome to the self-driving cars specialization
  3. SM3密码杂凑算法源码解析
  4. php 实现百度坐标转换,PHP实现腾讯与百度坐标转换
  5. ios 不被遮挡 阴影_为何你没见到日环食?你不知道的天象常识原来还有这么多 | 返朴...
  6. Linux简单命令收录(cal,passwd,clear)【下】
  7. (八)nodejs循序渐进-事件驱动(进阶篇)
  8. Linux(14)-正则表达式
  9. anaconda中怎么sh_【好工具】 深度学习炼丹,你怎么能少了这款工具!JupyterLab 远程访问指南...
  10. 并发和并行的区别简单介绍