The ambiguity in angular custom instruction and the nesting of custom instruction

Time:2020-11-1

original intention

The original intention of this article is as follows:

1. Recently, we need to use the ng custom instruction in the project, and it also involves the nesting of the custom instruction.
2. Baidu and Google find the answer is not satisfactory.

So I want to write an article by myself.

Prior statement

In advance, I have just entered the front-end for more than four months. I belong to a new egg. I also wrote a blog for the first time (I gave it to SF for the first time) I try my best to express what I want to say. Well, don’t say much nonsense. Run straight into the subject.

premise

First of all, do not know the ng custom instructions for children’s shoes, please stamp this article.
http://www.cnblogs.com/lvdaba…
This article is divided into upper, middle and lower, three articles, and the ng custom instruction has been very detailed.

Secondly, we don’t know what the “fusion” in the ng custom instruction is. Please stamp this article for children’s shoes.
http://www.html-js.com/articl…
This article uses the colloquial way of expression to tell wittily what is the meaning of the translation.

All right, here we go again.

The value of the transaction

Let’s create an app first. The code is as follows

var app=angular.module('myApp', []);
app.controller("testController",function($scope){
    
});

We all know that the transaction is a configuration item of a user-defined instruction. Its values are as follows:

1. Boolean type, that is, true or false. Of course, the default is false.
It can be an object type.
3. Element type. It can also be an element. I haven’t played element yet

When the transformation is Boolean

Well, let’s talk about when the value is Boolean.
Create a custom instruction and set its translation to true. The code is as follows:

app.directive('popSelect',[function(){
  return {
    restrict: 'AE',
    scope:{
            
    },
    transclude:true,
    replace:true,
    template:
       '<div>'+
          '<div>'+
              '<input type="text" ng-model="input" ng-focus="hasDate=true"/>'+
           '</div>'+
           '<div ng-transclude></div>'+
           '< div > this is the content of the popselect directive < / div >'+
        '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}]);

You should see that there is an extra thing in the template, which is’ < div ng translate > < / div > ‘, and you can see it. Leave a suspense here.

Since it is the nesting of user-defined instructions, it is necessary to have two instructions at least. Let’s not say much nonsense. Create another instruction. This instruction is nested by others as a son, and the instruction nested by others is called father. The code is as follows:

app.directive('childElem',[function(){
    return {
        restrict: 'AE',
        replace:true,
        template:'<div>'+
                    '< div > this is the content of the child instruction < / div >'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])

Father and son have been created. Let’s see how the html is nested. Direct code:

<pop-select>
    <child-elem></child-elem>
</pop-select>

Yes, html is so simple. Let’s see what the effect of the page is:

The ambiguity in angular custom instruction and the nesting of custom instruction

See, the son’s template content is embedded into the father’s template (let’s think of it as the template). Where is it embedded in the father’s template? Let’s take a look at the console.

The ambiguity in angular custom instruction and the nesting of custom instruction

Did you find out that the position in the red box above is exactly the position of the phrase ‘< div ng translate > < / div > “in the father’s template.

Yes, as long as your instructions are nested with other instructions, you can set t in your father's configuration item ransclude:true If you want to add the phrase '< div ng translate > < / div >' in the template, ng will automatically add the content of his son to the label '< div ng translate > < / div >'. Please look at the picture in the red box of the console carefully.

Now we’re going to do it automatically ransclude:true How to use it.

When the transaction is object

Here someone is going to ask: you are nesting a son. If my family has a lot of money, I am a local tyrant, and I want to have many sons, what should I do?

At this point, we will use the value of “exclude” as object. Don’t say much nonsense, code again.

app.directive('parentDirective',[function(){
  return {
     restrict: 'AE',
     transclude:{
         'child1':"childElem",
          'child2':"childElem2",
           'child3':"childElem3"
     },
     replace:true,
     template:
       '<div>'+
          '<div>'+
             '< input type = "text" ng model = "input" value = this is a parant instruction "/ >'+
          '</div>'+   
          '<div ng-transclude="child2"></div>'+
          '<div ng-transclude="child3"></div>'+
          '<div ng-transclude="child1"></div>'+
       '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}]);

You notice that this time the father’s exclude is an object

         {
            'child1':"childElem",
            'child2':"childElem2",
            'child3':"childElem3"
         }
         

There are three more sentences in my father’s template:

      '<div ng-transclude="child2"></div>'+
      '<div ng-transclude="child3"></div>'+
      '<div ng-transclude="child1"></div>'+
      

You may notice that the three sentences of Child1, child2 and child3 are the same as the three attributes Child1, child2 and child3 in the father’s exclude value. Guess, I think someone should know how to play.

What are childelem, childelem2 and childelem3 in father’s exclude value? Don’t worry. No, the father doesn’t have a son yet? Here, give him three sons.

First, the eldest son:

app.directive('childElem',[function(){
    return {
        restrict: 'AE',
        replace:true,
        template:'<div>'+
                    '< div > this is the content of the child instruction < / div >'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])

Then the second son:

app.directive('childElem2',[function(){
    return {
        restrict: 'AE',
        replace:true,
        template:'<div>'+
                    '< div > this is the content of childelem2 instruction < / div >'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])

Finally, the third son:

app.directive('childElem3',[function(){
    return {
        restrict: 'AE',
        replace:true,
        template:'<div>'+
                    '< div > this is the content of childelem3 instruction < / div >'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])

Now that the sons are here, it’s time for HTML. Continue with code:

<parent-directive>
    <child-elem></child-elem>
    <child-elem2></child-elem2>
    <child-elem3></child-elem3>
</parent-directive>

So what is the page effect like? Look at the picture below

The ambiguity in angular custom instruction and the nesting of custom instruction

Look, the contents of the three sons and the contents of their fathers are shown.

Let’s look at the console again:

The ambiguity in angular custom instruction and the nesting of custom instruction

The content in the three red boxes is the template of three sons.

You should understand by now, that's right. When the father's merge is an object, the property name is your own name, and the value is the name of the son you want to embed. Then you write '< div ng translate = you have a good attribute name "> < / div >" in the father's template, so ng can know where you want to embed your son into his father.

Well, there’s nothing I don’t understand. If you don’t understand, please see it again. Ha ha

All sample code

Finally, attach all the code in this example.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body ng-controller="testController">
    <h1>Nesting an instruction</h1>
       <pop-select>
          <child-elem></child-elem>
       </pop-select>

    <h1>&nbsp;</h1>

    <h1>Nesting multiple instructions</h1>
       <parent-directive>
           <child-elem></child-elem>
           <child-elem2></child-elem2>
           <child-elem3></child-elem3>
       </parent-directive>
</body>
<script></script>
<script>
   var app=angular.module('myApp', []);
   app.controller("testController",function($scope){
    
   });
   app.directive('popSelect',[function(){
      return {
        restrict: 'AE',
        scope:{
            
        },
        transclude:true,
        replace:true,
        template:'<div>'+
                    '<div><input type="text" ng-model="input" ng-focus="hasDate=true"/></div>'+
                    '<div ng-transclude></div>'+
                    '< div > this is the content of the popselect directive < / div >'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}]);

app.directive('childElem',[function(){
    return {
        restrict: 'AE',
        replace:true,
        template:'<div>'+
                    '< div > this is the content of the child instruction < / div >'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])

app.directive('parentDirective',[function(){
  return {
     restrict: 'AE',
     transclude:{
         'child1':"childElem",
          'child2':"childElem2",
           'child3':"childElem3"
     },
     replace:true,
     template:
       '<div>'+
          '<div>'+
             '< input type = "text" ng model = "input" value = this is a parant instruction "/ >'+
          '</div>'+   
          '<div ng-transclude="child2"></div>'+
          '<div ng-transclude="child3"></div>'+
          '<div ng-transclude="child1"></div>'+
       '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}]);
app.directive('childElem2',[function(){
    return {
        restrict: 'AE',
        replace:true,
        template:'<div>'+
                    '< div > this is the content of childelem2 instruction < / div >'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])

app.directive('childElem3',[function(){
    return {
        restrict: 'AE',
        replace:true,
        template:'<div>'+
                    '< div > this is the content of childelem3 instruction < / div >'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])
</script>
</html>

Thank you for your patience.

Recommended Today

In depth analysis of message middleware selection

preface Message Queuing Middleware (hereinafter referred to as message middleware) refers to the use of efficient and reliable message delivery mechanism for platform independent data exchange, and based on data communication to integrate distributed systems. By providing message delivery and message queuing model, it can provide application decoupling, elastic scaling, redundant storage, traffic peak clipping, […]