Create custom AngularJS commands: Part 4 transclude and restrict Introduction
In the 3rd articles in this series, I introduced how to pass parameters to external functions defined in commands in an isolated scope attribute (some tips are needed at first, once you master the key points, it becomes very easy ). In this article, I will continue to introduce the User-Defined commands, including the transclude and restrict command parameters to see what functions they have and how to use them.
Restrict in command
In HTML, commands can be defined as elements, attributes, CSS classes, and annotations. How do you limit the usage of custom commands?
AvailableRestrictInterface attribute to specify how and where custom commands are used in HTML. The values of this interface property are as follows:
| Restrict Value |
Explanation |
| E |
Used as an element. Example: |
| A |
Used as an element attribute. Example: |
| C |
Used as the style class on the element. Example: |
| M |
Used as a comment (rarely used ). Example: |
The following is an example of an instruction used as an element or attribute. Note that these two values are not separated.
app.directive('myDirectiveWithRestriction', function () { return { restrict: 'EA', scope: { tasks: '=' } };});
Even C and M values can be used, but they are rarely used. Most commands only use E and. Now that you know restrict, let's take a look at the concept of transclude.
Transclude in the command
The first time I heard the word "transclusion", I suspect it is not a real word (if you have seen my 60 ish video in AngularJS on YouTube, you will know it is true ). If you search for this word in a Network Dictionary, you won't find anything, but the definition can be found on Wikipedia and other websites. Most websites define the "transclusion" as follows:
Include part of a document or document to another document by reference(See Wikipedia ).
If you have loaded a CSS style sheet or HTML template (HTML5 update function) to an HTML page or HTML segment of the loaded header or footer to a server page (usually called a server-side inclusion ), you have used the transclusion method. Here is a short video that provides a quick overview of transclusion: (see the original video)
For AngularJS, transclude (the verb form of transclusion) provides a template for defining the INSERT command and a method for displaying the template. For example, you may have an instruction that needs to output a table, and the instruction owner is allowed to control how to render table rows. Alternatively, you may have an instruction that outputs an error message, and the user of the instruction can control the HTML content and use different rendering colors. With these features, the command user can have more control over how to render each part of the HTML generated by the command.
To support replacement, there are two key points that must be mastered. The first key point is to use
TranscludeWhen the property is in the instruction, in HTML, the custom instruction contains other DOM, if
TranscludeIf the attribute is set to false, the template defined in the instruction replaces the DOM inside the instruction. If
TranscludeIf the attribute is set to false, the DOM will be placed in the instruction internal template.
Ng-transcludeWhere the command is located, if it is not written
Ng-transclude, These DOM will not appear in the page. The second key point is
Ng-transcludeCommands, which are internal commands of AngularJS and are used to determine where external content is embedded in a command template. The following command code is replaced by the two key points.
Original content,
It will also be here. <Script src = .. /.. /lib/angular. js> </script> <script src = .. /.. /lib/jquery. js> </script> <script> var app = angular. module ('ctictivesmodule ', []); app. directive ('hello', function () {return {restrict: 'E', template: 'Hi there', transclude: true, replace: false };}); </script>
The running effect is as follows:
Hi there
Original content,
It will also be here. Hi there
In this example, we can also see that there is a replace attribute. When this attribute is set to true, the DOM where the tag in the page is replaced with the template (the hello tag in this example ); when set to false, the template is placed inside the tag.
Summary
Once you understand how to use transclude, it will become very simple. As mentioned in the video, the concept of server-side inclusion or CSS style single-embedded webpage is similar to that of transclude. Use in CommandsTranscludeAndNg-transcludeYou can customize your commands.
So far, is the custom command series over? Unfortunately, it is not over. When the instruction template containsNg-repeatOrNg-if, Transclude will become very complex. I will introduce how to deal with these scenarios in the following articles.
