Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "angular.js instruction in the transclude option and how to use the ng-transclude instruction", the content is easy to understand, clear, hope to help you solve the doubt, the following let the editor lead you to study and learn "angular.js instruction in the transclude option and how to use the ng-transclude instruction" this article.

Transclude literally means embedding, which means whether you need to embed the elements inside your instruction (note that it is not an instruction template) into your template. The default is false. If you need this feature, you need to set transclude to true or {.}. If this value is set to true or {.}, then it should be used in conjunction with the ng-transclude instruction of angular. OK, no more nonsense, look at the code is the best way to learn, let's learn these things according to the code.

The result of the code can be seen here, and the complete code will be posted later.

Now let's look at the first instruction section.

1. The form used in the page

$AAAAAA $I am the content inside the [one-transclude] element of the instruction

We defined an instruction called one-transclude, which means that there is only one embedded point in the template of the instruction, and there are some elements inside the instruction. I marked the contents of the internal elements for us to look at later.

2. JavaScript code part

Angular.module ('app', []) .directive (' oneTransclude', oneTransclude); function oneTransclude () {return {restrict: 'AE', transclude: true, templateUrl:' one-transclude.html'};}

We define oneTransclude in JavaScript, and notice that we have transclude=true here, indicating that we want to embed the internal element of the instruction somewhere in the template.

3. The template part of the instruction

$BBBBBB$ I am the content of the instruction [one-transclude] template $CCCCCC$ I am the content of [ng-transclude] in the instruction [one-transclude] template

Our instruction template is written above, and you can see that our template consists of two parts, one containing the ng-transclude instruction and the other without it. Of course, I also made some marks on these contents to facilitate our observation later. Because there are no parameters after the ng-transclude here, the elements in the instruction are those that start with $AAAAAA$ and are embedded inside the instruction template that contains the ng-transclude instruction, and note that if there are elements inside the element that contains the ng-transclude instruction in the instruction template, then these elements will be replaced. In another case, if the instruction does not contain an element, the internal element of the element containing the ng-transclude instruction in the instruction template will be displayed.

4. We can take a more intuitive look at the following picture.

In the case of multiple embedding points, the value of ng-transclude inside the instruction is an object and a mapping relationship. For more information, please see the following code:

5. The code that the directive uses on the page:

I mean the title inside the element. I mean the body inside the element. I mean the footer inside the element.

We use the multi-transclude instruction on the page, and there are three instructions inside the instruction. These three instructions should be applied in the form of E, otherwise there will be problems. It doesn't matter to see what you don't understand here, so move on.

6. Instructions in JavaScript code:

Angular.module ('app', []) .directive (' multiTransclude', multiTransclude); function multiTransclude () {return {restrict: 'AE', transclude: {' title': 'multiTranscludeTitle',' body': 'multiTranscludeBody',' footer':'? multiTranscludeFooter'}, templateUrl: 'multi-transclude.html'};}

Our transclude object defines how to map multiple embedding points to instruction embedding points one by one, using 'footer':'? multiTranscludeFooter' to explain that footer corresponds to an embedding point in the instruction template, and multiTranscludeFooter corresponds to which multi-transclude-footer instruction inside the instruction element, before? Indicates that this embedding point does not necessarily have a corresponding instruction. Of course, multiTranscludeFooter is defined by ourselves and can be defined at will, but try to let everyone know which embedded point it corresponds to at a glance.

7. Template corresponding to instruction

Ignore me, I am to prove that I am in the template 1 ignore me, I am to prove that I am in the template 2

From the template above, we can see that the string after the instruction ng-transclude is the embedding point we defined, that is, the strings used in the above instruction definition.

I think you all understand the transclude options for ng-transclude and angular instructions here.

Complete part of the code

1 、 index.html

The instruction one-transclude contains the element $AAAAAA $I am the content instruction inside the instruction [one-transclude] element the content instruction one-transclude does not contain the element instruction mutil-transclude I mean the title inside the element I mean the body inside the element I mean the footer inside the element

2 、 app.js

(function () {angular.module ('app', []) .controller (' MyController', myController) .directive ('oneTransclude', oneTransclude) .directive (' multiTransclude', multiTransclude); myController.$inject = []; function myController () {var vm = this; vm.title = 'ng-transclude';} function oneTransclude () {return {restrict:' AE', transclude: true, templateUrl: 'one-transclude.html'} } function multiTransclude () {return {restrict: 'AE', transclude: {' title': 'multiTranscludeTitle',' body': 'multiTranscludeBody',' footer':'? multiTranscludeFooter'}, templateUrl: 'multi-transclude.html'};}) ()

3 、 one-transclude.html

$BBBBBB$ I am the content of the instruction [one-transclude] template $CCCCCC$ I am the content of [ng-transclude] in the instruction [one-transclude] template

4 、 multi-transclude.html

Ignore me, I am to prove that I am in the template 1 ignore me, I am to prove that I am in the template above 2 is the "angular.js instruction transclude options and how to use the ng-transclude instruction" all the content of this article, thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.