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

  我们使用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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/457882.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设备模型2

前言 在上一篇中&#xff0c;我们大致描述了LINUX设备模型&#xff0c;我们先来总结一下三要素的关系。 从图中可以看出,Linux设备模型就是"总线、设备、驱动、类"这四个概念之前的相互关系;这也是Linux2.6内核抽象出来的用于管理系统中所有设备的模型图; 简单地描述…

angular自定义指令详解

指令&#xff08;directive&#xff09;是angular里面最核心也是最难懂的东西&#xff0c;在慕课网看了下大漠穷秋老湿的视频&#xff0c;自己百度半天做了一些小test&#xff0c;总算把一切都搞明白了。 先列出学习来源&#xff1a; 指令中controller和link的区别&#xff1a;…

delphi7aes加密解密与java互转_跨语言(java vs python vs nodejs)的RSA加解密问题探讨

多次被问到这样的问题&#xff1a;java服务端的rsa加密操作已经完成&#xff0c;返回一个16进制的字符串给python平台&#xff0c;但是在python进行私钥解密的时候发现行不通。。。。前端python加密&#xff0c;后端用java解密&#xff0c;解不出来还有诸如nodejs从理论上来说&…

类的定义、成员定义修饰符

类的定义 修饰符含义1无或internal 只能在当前项目中访问类&#xff0c;其它项目引用后也无法访问2public 可以任何地方访问类3abstract 不能实例化&#xff0c;只能供继承之用4sealed 不能供派生之用&#xff0c;只能实例化5internal abstract136public abstract237intern…

设备模型3

在上一篇分析中&#xff0c;多次提到了SYSFS&#xff0c;这是个什么东西&#xff1f;这可是个很大的TOPIC&#xff0c;关于它的讲述可以写本书&#xff0c;但是我们暂时的目标不是要完全啃投它所有的东西&#xff0c;没时间&#xff0c;没精力&#xff0c;我们只要掌握我们需要…

浪潮之巅读后感

这几天看到一本非常好的书《浪潮之巅》。浪潮&#xff0c;指的是时代的大潮。而浪潮之巅&#xff0c;顾名思义就是指站在时代潮流的巅峰&#xff0c;引领时代潮流&#xff0c;扛起发展大旗。而本书就是在介绍各大处在浪潮之巅的IT公司的历史及发展。 书中有句话说得好&#xff…

利用dft的定义计算dft的matlab程序_CP2K教程系列之静态计算(Pymatflow篇)

本系列CP2K教程是《CP2K菜根谭》的升级版&#xff0c;在旧版基础上添加了如何结合Pymatflow工具简化计算流程的内容。话不多说&#xff0c;本文将为您带来CP2K系列教程中的静态计算部分。静态计算设置静态计算是大多数人接触第一性原理计算后第一次运行的计算类型。很多其它类型…

机器学习:最大似然估计与最大后验概率估计

在机器学习领域&#xff0c;概率估计是经常用到的一种模型&#xff0c;而概率估计中&#xff0c;我们经常会看到两种估计模型&#xff0c;一种是最大似然估计&#xff0c;即 Maximum likelihood&#xff0c; 另外一种就是最大后验概率估计&#xff0c;即 Maximum posterior &am…

ubuntu14.04安装git

参考教程&#xff1a;git介绍&#xff1a;安装&#xff0c;使用&#xff0c;创建分支 安装的方法有两种&#xff0c;一种直接是通过ubuntu的APT安装&#xff0c;这种方法最简便&#xff0c;缺点是版本可能不是最新的。所有还有另一种方法是下载源码进行安装&#xff0c;这种能…

微软是如何戏耍程序员们的

2019独角兽企业重金招聘Python工程师标准>>> 别用微软的东西。商业目的性太强&#xff0c;千万别被微软牵着鼻子走&#xff0c;血淋淋的教训。微软推出的垃圾多了去了。它什么都想做&#xff0c;很多都没做好&#xff1a; MFC&#xff1a;Win31时代出生&#xff0c;…

3d立体相册特效html网页代码_新闻类网页正文通用抽取器

项目起源开发这个项目&#xff0c;源自于我在知网发现了一篇关于自动化抽取新闻类网站正文的算法论文——《基于文本及符号密度的网页正文提取方法》这篇论文中描述的算法看起来简洁清晰&#xff0c;并且符合逻辑。但由于论文中只讲了算法原理&#xff0c;并没有具体的语言实现…

ubuntu14.04安装 R16 Tina Linux SDK

第一步&#xff1a;由于是14.04系统所以这样$sudo -i $cd /etc/apt/sources.list.d $echo "deb http://old-releases.ubuntu.com/ubuntu/ raring main restricted universe multiverse" > ia32-libs-raring.list $apt-get update $apt-get install ia32-libs $r…

分答

用户在分答上可以自我介绍或描述擅长的领域&#xff0c;设置付费问答的价格&#xff0c;其他用户感兴趣就可以付费向其提问。分答的收入分配机制增加了信息的价值&#xff0c;分答中信息接收者被区分成了两种身份。首先提问的人是一种付费悬赏模式&#xff0c;当回答完毕内容沉…

字节数组转换为图片_每日一课 | Python 3 TypeError:无法将“字节”对象隐式转换为str...

将Python 2套接字示例转换为Python 3whois.py import sysimport sockets socket.socket(socket.AF_INET, socket.SOCK_STREAM)s.connect(("whois.arin.net", 43))s.send((sys.argv[1] "\r\n").encode())response ""while True: data s.re…

php版redis插件,SSDB数据库,增强型的Redis管理api实例

php版redis插件,SSDB数据库,增强型的Redis管理api实例 SSDB是一套基于LevelDB存储引擎的非关系型数据库&#xff08;NOSQL&#xff09;&#xff0c;可用于取代Redis&#xff0c;更适合海量数据的存储。另外&#xff0c;rocksdb是FB在LevelDB的二次开发版本&#xff0c;因此也存…

加速度计和陀螺仪数据融合

本帖翻译自 IMU&#xff08;加速度计和陀螺仪设备&#xff09;在嵌入式应用中使用的指南。这篇文章主要介绍加速度计和陀螺仪的数学模型和基本算法&#xff0c;以及如何融合这两者&#xff0c;侧重算法、思想的讨论介绍本指南旨在向兴趣者介绍惯性MEMS&#xff08;微机电系统&a…

循环嵌套练习题

//BOSS://让用户输入一个奇数&#xff0c;打印菱形&#xff0c;最长的行内容个数为用户输入的个数&#xff0c;并且由英文字母拼接而成//比如用户输入了7// A// ABA// ABCBA// ABCDCBA// ABCBA// ABA// A//1、接收并判断用户输入的是不是数字 try{#region 解法一…

python leetcode_leetcode 介绍和 python 数据结构与算法学习资料

for &#xff08;刚入门的编程&#xff09;的高中 or 大学生leetcode 介绍leetcode 可以说是 cs 最核心的一门“课程”了&#xff0c;虽然不是大学开设的&#xff0c;但基本上每一个现代的高水平的程序员都修过这门“课程”&#xff08;或者类似的课程&#xff0c;比如数据结构…

平衡小车卡尔曼滤波算法

最近研究STM32的自平衡小车&#xff0c;发现有两座必过的大山&#xff0c;一为卡尔曼滤波&#xff0c;二为PID算法。 网上看了很多关于卡尔曼滤波的代码&#xff0c;感觉写得真不咋地。一怒之下&#xff0c;自己重写&#xff0c;不废话&#xff0c;贴代码 [pre lang"C&quo…

IOS 为UILabel添加长按复制功能

IOS 为UILabel添加长按复制功能 在iOS中下面三个控件&#xff0c;自身就有复制-粘贴的功能&#xff1a; 1、UITextView 2、UITextField 3、UIWebView UIKit framework提供了几个类和协议方便我们在自己的应用程序中实现剪贴板的功能。 1、UIPasteboard&#xff1a;我们可以向其…