AngularJs provides a detailed explanation of some of the commands and angularjs

AngularJs provides a detailed explanation of some of the commands and angularjs

We often use commands when using ng. I will not introduce the attributes that are well known to you here. I will explain the attributes that you did not pay attention.

1. multiElement

This function is used to specify the interval of a command. The most common functions are ng-repeat-start and ng-repeat-end.

2. priority

Command priority. The higher the priority, the earlier the command is executed.

3. terminal

Whether commands with lower priority are allowed to work. If it is true, only commands with the same level as the current command or the current command can be executed. The most typical is ngIf.

4. templateNamespace

The Declaration template has three formats: svg, html, and math.

5. transclude

Some people may have doubts. Is transclude considered a unpopular attribute? In fact, you don't know much about transclude. transclude is a complex attribute. Generally, you only need to use true or false. I will not talk about these two attributes here. Here I mainly talk about transclude: element. I haven't found a method to correctly describe this attribute all day after google. I think google's answers are too documented. At last, we studied $ transclude to see where the function of this attribute is. Before talking about functions, let's take a look at $ transclude.

Whether in the compile or link phase of the command, our last parameter is $ transclude. Here we actually look at how the source code is defined. 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);     }    }

Another function should be specifically pointed out, that is, the boundTranscludeFn method returned at the end. 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 are the two methods doing? In fact, it is to clone the node of the current command and generate a sub-scope. The cloned node is defined by transclude. If your attribute is true, the cloned DOM node where ng-transclude in the instruction template is located and Its subnodes. If the attribute is element, the entire template node is cloned.

This is the code of two commands.

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 your understanding of the result, you can comment out the result and view the clone printed on the console. Then you can understand the role of the so-called transclude attribute declaration as element, the purpose of the replace function is to clearly view the DOM node and draw a conclusion. The following is the difference between the DOM nodes after compilation.

After reading the above figure, you can obviously distinguish between the two to clone the DOM. In addition, if the attribute is declared as 'element', you must declare replace to true before rendering. I checked a lot of information and finally came to the conclusion I thought I was right through the breakpoint tracing. The result of the breakpoint tracing is that if replace is not declared, it seems that the ngTransclude command will not be executed, which is strange to me, as a result, rendering fails. In the final analysis, the two operations have different DOM elements. When declaring transclude as an element, replace is true. The DOM node you get is a node (subnode) containing the transclude attribute ), if it is false, You do not obtain the node (parent node) that contains the transclude attribute. ng itself does not traverse the node, leading to the failure to execute the ngTransclude command.

I have seen a point of view that is good, probably because of functional considerations, when using the element attribute, it usually plays a placeholder role, the clone function is used only when DOM is added.

I think this is a good idea. I have read a lot about ngrepeat. Many articles say that the ngrepeat source code is through $ scope. $ new () is used to generate a sub-scope. In fact, it is not completely correct. It does use $ scope. $ new generates subscopes, but this generation function is done by the $ transclude function. In fact, the ngrepeat source code uses $ transclude to generate subscopes and add DOM nodes. It is similar to the above viewpoint.

The above is a detailed explanation of some of angularJs's cold-door attributes of commands. I hope you can provide more support to the customer's house ~