Angularjs about the instructions of some of the unpopular attributes detailed _angularjs

When we use NG, we often use the instructions, the well-known attributes I'm not going to introduce here, tell us about the attributes that we don't pay attention to.

1.multiElement

This is the function that specifies the function range of the instruction, the most commonly used is Ng-repeat-start and ng-repeat-end.

2.priority

Instruction priority, the higher the priority, the earlier the instruction executes.

3.terminal

Whether an instruction with a lower priority is allowed to work, and if true, only those instructions that are the same as the current instruction or the current instruction level can be executed. The most typical is ngif.

4.templateNamespace

There are three options for declaring templates in the format SVG, HTML, Math

5.transclude

Perhaps some doubt, Transclude is also an unpopular attribute? In fact, we do not think transclude understand that deep, transclude is a very complex attribute, the general people will use is only true,false. These two properties I'm not going to tell you here, I'm talking about transclude:element here, and I haven't found a way to properly describe this attribute all day. I think Google's answers are too documented. Finally, in the study of $transclude to see the function of this property is exactly where. Before we go back to the function, we understand the $transclude.

Whether in the command compile or link period our last parameter is $transclude, here we look at the source code is how to define, I see the source code is 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);
     }
    }

There is another function to specifically point out, is the last return of the Boundtranscludefn this method, the following is his source code

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
    });
   

What exactly are these two methods doing? In fact, the node of the current instruction is cloned and the child scope is generated. The cloned node is defined by transclude, and if your property is True, the clone is the DOM node of the ng-transclude in the instruction template, and its child nodes. If the attribute is an element, the node of the entire template is cloned.

This is the code for two instructions.

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);
            })
          }
        }
      })

If you think that replace interferes with the understanding of the result, you can comment out and then look at the clone printed in the console, and you will know that the so-called transclude attribute declaration is the function of element, we open the replace to see the DOM node more clearly To get a conclusion, here is the difference between the compiled DOM nodes

After reading the above diagram, you can clearly distinguish between the two to the DOM clone is not the same, and if you declare the attribute is ' element ', you need to declare replace is true, in order to render out. I looked through a lot of data, and finally used a breakpoint to come to the conclusion I think right, the result of breakpoint tracking is to find that if you do not declare replace, it seems that the ngtransclude instructions will not be executed, which I am very strange, because of this so that the result is not successful rendering. Two in the final analysis is actually the operation of the DOM element is different, when declaring transclude as element, replace is true, the DOM node that you take is a node (child node) that contains the transclude attribute. And for false what you get is not a node with the Transclude attribute (the parent node), and Ng itself does not traverse its nodes, causing the ngtransclude command to not be executed

I see a point of view that is good, presumably the meaning: from the functional considerations, when using the element attribute is generally a placeholder for the role, you need to do is to add to the DOM, the use of this cloning function.

I think this is a good point of view, read a lot about ngrepeat, a lot of articles are said Ngrepeat source is through the $scope. $new () to generate the child scope, actually not completely correct, he is indeed through the $scope. $new Produce child scopes, But this generation function is to give $transclude function to do, actually ngrepeat source code is through $transclude to generate child scope and add DOM node. There is a similarity with the above view.

The above is a small series for you to bring angularjs about the instructions of some of the unpopular attributes of all the content, I hope that we support cloud Habitat Community ~