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 组件之旅(一)分析和设计
Oct 28 Javascript
js 加载并解析XML字符串的代码
Dec 13 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 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批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
php封装的page分页类完整实例
2016/10/18 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
关于vue面试题汇总
2018/03/20 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
个人简历的自荐信
2013/10/23 职场文书
幼儿如何来做好自我评价
2013/11/05 职场文书
会计专业自荐信范文
2013/12/02 职场文书
2013的个人自我评价
2013/12/26 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
高级工程师英文求职信
2014/03/19 职场文书
本科生求职信
2014/06/17 职场文书
党员查摆剖析材料
2014/10/10 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL