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


Posted in Javascript onOctober 24, 2016

我们使用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节点的区别了

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

看完上面的图,你可以明显的区别到两者对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节点的。与上面的观点有相似之处。

以上就是小编为大家带来的angularJs关于指令的一些冷门属性详解全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript Array扩展实现代码
Oct 14 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
three.js显示中文字体与tween应用详析
Jan 04 Javascript
浅谈Angular中ngModel的$render
Oct 24 #Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 #Javascript
H5移动端适配 Flexible方案
Oct 24 #Javascript
javascript的document中的动态添加标签实现方法
Oct 24 #Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 #Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 #Javascript
express文件上传中间件Multer详解
Oct 24 #Javascript
You might like
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python装饰器用法实例总结
2018/02/07 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python支付宝支付示例详解
2019/08/22 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
C#软件工程师英语面试题
2015/06/07 面试题
什么是规则表达式
2012/05/03 面试题
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
2014庆六一活动方案
2014/03/02 职场文书
禁止酒驾标语
2014/06/25 职场文书
小学教师党员承诺书
2015/04/27 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python