Explanation of transclude options and ng-transclude commands in angular. js commands, and angularjsng commands

Explanation of transclude options and ng-transclude commands in angular. js commands, and angularjsng commands

Preface

Before starting this article, we must first describe that the angular version we use is 1.5.0, because different versions have different performance results.

First, we should understand that one option in the angular command is transclude, which has three values: false, true, and object. What are the three values respectively, how to choose?

The following is a detailed description.

Transclude literally means embedding. That is to say, you do not need to embed the elements (not the template of the command) in your template. The default value is false. If you need this function, you need to set transclude to true or {...}. If you set this value to true or {...} then, we need to use the ng-transclude command of angular. Well, no more nonsense. Reading code is the best way to learn, next we will learn about these things based on the code.

The results of the code can be seen here, and the complete code will be pasted in the back.

Now let's look at the first instruction section.

1. Form used on the page

<! -- Instruction one-transclude contains internal elements --> <one-transclude class = "one-transclude-self"> <div class = "one-transclude-self _ footer"> $ AAAAAA $ I am the internal content of the [one-transclude] element of the command </div> </one-transclude>

We have defined an instruction named one-transclude. That is to say, there is only one embedded point in the instruction template, there are some elements inside the instruction. I have marked the content of the internal element so that we can observe it later.

2. JavaScript code

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

We define oneTransclude in JavaScript.transclude=trueIndicates that we want to embed the internal elements of commands in the template into a certain position in the template.

3. Instruction Template

<Div class = "one-transclude"> <div class = "one-transclude _ title"> $ BBBBBB $ I am the content of the template of the instruction [one-transclude] </div> 
We have written our instruction template above. We can see that our template consists of two parts, one containing the ng-transclude instruction, and the other without this instruction. Of course, I also marked the content so that we can observe it later. The ng-transclude does not have any parameters. Therefore, the elements in the command are all elements starting with $ AAAAAA $ embedded in the instruction template that contain the ng-transclude command, note that if the instruction template contains elements in the ng-transclude instruction, these elements will be replaced. In another case, if the instruction does not contain any element, the internal elements of the instruction template containing the ng-transclude instruction will be displayed.

4. Let's take a look at it more intuitively.

When multiple embedded points exist, the ng-transclude value inside the command is an object and a ing relationship. For details, refer to the following code:
5. code used by commands on the page:

<! -- Command mutil-transclude --> <multi-transclude-title> I am the title inside the command element </multi-transclude-title> <multi-transclude-body> I am the body inside the instruction element </multi-transclude-body> <multi-transclude-footer> I am the footer inside the instruction element </multi-transclude-footer> </ multi-transclude>
We use the multi-transclude command on the page. There are three commands in the command. The three commands must be applied as E. Otherwise, problems may occur, it doesn't matter if you don't understand it here. Let's continue.

6. commands 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 one-to-one correspondence between multiple embedded points and the instructions embedded in the command,Take 'footer ':'? MultiTranscludeFooter'To explain, which of the following multi-transclude-footer commands in the multiTranscludeFooter command element correspond to an embedded point in the instruction template of footer? This indicates that this embedded point does not necessarily have corresponding commands. Of course, multiTranscludeFooter is defined by ourselves and can be defined at will, but try to let everyone know which embedded point is corresponding at a glance.

7. template corresponding to the instruction

<Div class = "multi-transclude"> <div class = "multi-transclude _ title" ng-transclude = "title"> </div> <div> ignore me, I just prove that I am in the template 1 </div> <div class = "multi-transclude _ body" ng-transclude = "body"> </div> <div> ignore me, I just prove that I am in the template 2 </div> <div class = "multi-transclude _ footer" ng-transclude = "footer"> </div>
From the template above, we can see that the strings after the instruction ng-transclude are the embedded points we have defined, that is, the strings used in the instruction definition above.

Now, I think you should understand the transclude options of ng-transclude and angular commands.
Complete Code Section
1、index.html

<Body ng-controller = "MyController as vm"> 

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' };}})();
3366one-transclude.html

<Div class = "one-transclude"> <div class = "one-transclude _ title"> $ BBBBBB $ I am the content of the template of the instruction [one-transclude] </div> 
4、multi transclude.html

<Div class = "multi-transclude"> <div class = "multi-transclude _ title" ng-transclude = "title"> </div> <div> ignore me, I just prove that I am in the template 1 </div> <div class = "multi-transclude _ body" ng-transclude = "body"> </div> <div> ignore me, I just prove that I am in the template 2 </div> <div class = "multi-transclude _ footer" ng-transclude = "footer"> </div>
Summary
The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.