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

Posted 何jason

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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节点的。与上面的观点有相似之处。

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

以上是关于angularJs关于指令的一些冷门属性的主要内容,如果未能解决你的问题,请参考以下文章

从 AngularJS 指令访问属性

指令之间的AngularJS通信

angularjs中的CKEditor自定义插件

AngularJS 指令属性从控制器访问

是否可以升级 angularjs 属性指令以在 Angular 4 中使用?

在AngularJS指令中为$ http.get加载模板属性