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 相关文章推荐
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
vue中使用props传值的方法
May 08 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
javascript中this指向详解
2016/04/23 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
javascript 中的继承实例详解
2017/05/05 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
深入理解Vue router的部分高级用法
2018/08/15 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
简述Python2与Python3的不同点
2018/01/21 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
大学生求职简历的自我评价
2013/10/21 职场文书