Preface
The importance of directives in AngularJS is self-evident. Directives allow us to create our own HTML tags. It turns custom elements into modules one by one, greatly reflecting the modular pattern in front-end development and improving the readability and reusability of the code. The instructions in AngularJS are also a difficult point in learning AngularJS. Many of the attributes need to be learned repeatedly and carefully experienced in order to understand the subtleties.
What we are going to talk about today is one of the key points and difficulties – transclusion. I have written many articles to talk about this topic before, but at that time I copied the examples from the blog posts and I didn’t have a deeper understanding of it, so I have never been able to understand it. Today our goal is to "completely understand the transclusion."
1. What is transclusion
OK, I know you will definitely look up the dictionary, but you will find that there is no accurate definition of the word transclusion in the dictionary! ! ! Nani! ! ! Isn’t this a scam? ! ! !
Fortunately, there is a comment on Wikipedia, which translates to the following meaning:
Translation in computer science refers to talking about a document or a part of a document being cited in another document.
I'm going, isn't this a scam! ! ! What's the meaning! ! ! !
Indeed, you guessed it, this explanation didn't help us at all! ! ! ! ! !
Fortunately, we finally found an explanation in a dictionary: "embedded", which refers to the word transclusion, and the word transclude that we are about to see later cannot be found in the dictionary at all. Forget it, calm down and continue reading. In fact, it is translated as "embedded", which is quite appropriate if you look at it from the actual application. If you don't understand what transclusion is, let's use an example to illustrate it below.
OK, now we are going to create a command, we call this command<handsome-me>. Let’s skip the creation process of this instruction first. If you don’t know how to create a instruction, please refer to the previous articles.
OK, no matter what, this directive has been created, so we can have the following usages:
The first type:
<handsome-me/>
It's like input, right? It's very simple. We call it "self-opening and autistic" (if you haven't read this name in other books, it's what I invented, it's called it anyway).
The second type:
<handsome-me></handsome-me>
Just like a div, right? It's simpler. We call it "open and close others" (same as above) tag.
The third type:
<handsome-me> //There are a lot of codes in the middle</handsome-me>
This one is very similar to the second one, but it is a bit different. We call it "open and close others, add a lump in the middle" (always feel very vulgar... never mind...) tag.
Let’s compare the following three labels, what are the differences? Of course there are many differences. But specifically speaking of our topic today, the biggest difference related to it is that there is no one lump in the first two, and a lump in the third one. OK, so let's summarize what transclusion is now:
If you want to add a lump in the middle of the specific use of the command when defining a directive, then you need to use transclusion.
This definition is really classic, it is completely clearer than any official document. It is completely different from the fact that foreigners complained for a long time but still didn't understand whether it was there. It is completely in line with China's national conditions! ! !
OK, after knowing the definition, we need to start to see how to use transclusion. If you know the writing of AngularJS directive, you must know that the tranclude directive of the object returned is false by default. Therefore, if you want to enable transclusion, you must assign another value to this transclude property. Of course, this value cannot be assigned randomly, there are only two options:
The first option:
transclude: true
The second option:
transclude: 'element'
I'll go, this is yarn again! There is a difference between the two! ! The documentation is completely incomprehensible! ! !
Be calm, let’s talk about the difference now. The most commonly used one is the first type, which means assigning a value to true. Do you still remember the Chinese meaning of transclusion, "embed" right? Therefore, we will not talk about "a piece of cake" now, but call the middle piece of cake "embedded part". OK, back to the topic, when transclude is true, the embedded part is the embedded part, for example:
<handsome-me>
{{name}}
<handsome-me>
existtransclude:trueWhat is its embedded part? By the way, that's it{{name}}. Let's send another post:
<handsome-me>
<div>
<span>{{name}}</span>
</div>
<handsome-me>
existtransclude:trueWhat is its embedded part? By the way, yes
<div>
<span>{{name}}</span>
</div>
Too simple, right! so easy! Mom no longer has to worry about my studies! ! !
Let’s talk about the second situation, what kind of situation is when the value of transclude is element. At this time, the embedding part becomes the original embedding part plus the outer custom tag, that is, the entire element. I can't understand it again! ! ! Fork fork fork!!!!!! Calm down, let’s give an example:
<handsome-me>
{{name}}
<handsome-me>
existtransclude:'element'What is its embedded part? By the way, it is:
<handsome-me>
{{name}}
<handsome-me>
Let's send another post:
<handsome-me>
<div>
<span>{{name}}</span>
</div>
<handsome-me>
existtransclude:'element'What is its embedded part? By the way, it is:
<handsome-me>
<div>
<span>{{name}}</span>
</div>
<handsome-me>
It's all said in such detail, don't say you can't do it anymore! ! !
2. What is the function of ng-transclude?
When writing instructions, we will have a property like template or templateUrl, right? When using transclusion, we want to put the embed part into the template, so we have two options, one of which is to use ng-transclude.
What is ng-transclude used for? Let’s look at the definition first and then the example:
ng-tranclude determines where to place the embedded part.
Very easy to understand! So let's take a look at the example:
Assume that the instruction is like this:
<handsome-me>
{{name}}
</handsome-me>
And the template looks like this:
<div> <p>MaMa does not need to worry about my study anymore! </p> <div ng-transclude></div> </div>
So, intransclude:trueIn the case of , what would the HTML that ended up in the page look like. By the way, it's like this:
<div>
<p>MaMa does not need to worry about my study anymore! </p>
{{name}}
</div>
Another situation, intransclude:'element'In the case of , what would the HTML that ended up in the page look like. By the way, it's like this:
<div>
<p>MaMa does not need to worry about my study anymore! </p>
<handsome-me>
{{name}}
</handsome-me>
</div>
The example is so clear, you can always understand it! !
3. The situation where ng-transclude is not used
OK, now let's think of a question, what if I want to put my embed part into my template multiple times? You may say, then put a few more ng-transcludes! Of course this is not possible. In AngularJS, you can only declare one ng-tranclude in the template of one instruction. So in this case we can use the template, so we need to use atranclude()function! !
Nani! What is this again! ! ! If you study the AngularJS documentation carefully, you will definitely find a service called $tranclude, which is what we are going to talk about now. So how do you use this function? If you have read some analysis of ng-repeat and ng-swift source code, you will definitely remember one of them called linker. What's in this thing that has troubled me for a long time, but then I found outlinker()Actually it'stransclude() 。
We can find the transclude function in link, compile and controller. In the link function, transclude is the fifth parameter of the link function; in the compile function, transclude is the third parameter of the compile function. In these two functions, since we do not use dependency injection, as long as the order is correct, it is OK to name whatever you want. In the controller function, since dependency injection is used, transclude is $transclude, as long as the name is written correctly, it is correct. In link, compile and controller functions, the usage of transclude is exactly the same, so here we will only give an example of the link function:
1. The easiest way to use:
link(scope,elem,attrs,ctrl,transclude){
var content = transclude();
(content);
}
Here we passtransclude()Return the specific content of the embedded part, and then append to the tail of the element's elem. Of course, you can also append multiple times.
2. More complicated usage:
link(scope,elem,attrs,ctrl,transclude){
tranclude(scope,function(clone){
(clone);
})
}
Here tranclude accepts two parameters, the first one is scope, which represents the scope. The second callback function contains a parameter clone, which is actually embedded content, andtransclude()The return value is exactly the same. So what is the purpose of the scope of the first parameter mentioned above? This has to talk about transclude and scope!
and scope
We know that when defining a directive, if scope is not explicitly declared, then the scope of the directive is the parent scope. If declaredscope:trueorscope:{} , then the directive will generate its own scope, just one prototype inherits and one independent. If you use transclusion, no matter what sentiment, a new scope will be generated. This scope is directly prototyped inherits from the parent scope. Its status is the same as the scope generated by the instruction, and the two are parallel relationships.
So we can understand nowtranclude(scope,function(clone){})What does scope mean? By default, if we use it simplytranslude() , then the default scope is the self-scope generated by transclude. But if we usetranclude(scope,function(clone){}) , then the scope is obviously the scope of directive. What if we want to use the parent scope, it's very simple:
tranclude(scope.$parent,function(clone){})
What to do if you want a new scope is also very simple:
tranclude(scope.$parent.$new(),function(clone){})
If you have what the scope of the text is and how the scope is inherited, that is not the topic we are going to talk about today.
Having said so much, so straightforward, I believe you have completely understood the translation of AngularJS. If you don’t understand, you will always understand if you read it a few more times! ! !
Summarize
The above is the entire content of this article. I hope the content of this article will be of some help to all Android developers. If you have any questions, you can leave a message to communicate. Thank you for your support.