This article mainly describes the three attributes of the restrict attribute, replace attribute, and template attribute in the instruction.
I. Restrict: String. Define the usage of commands in the view. There are four usage methods:
1. element: E
2. attribute:
3. Style Class: c
4. Note: m
The restrict value can be any one or more combinations of the above four letters. If not specified, the default value is.
2. Replace: Boolean value. Whether to replace the command element. There can be two values:
1. True: Replace the elements of the entire instruction.
2. False: The content is appended to the inner of the instruction element instead of replacing the entire element of the instruction.
If this parameter is not specified, the default value is false.
III. template: string. specifies the inline template to be used by the command element. simply put, it is a string of HTML, which is inserted into the directive element (or replaced with the directive element)
Rarely used. Generally, inline templates are complicated and cannot be pieced together by strings to produce a long piece of HTML. You need to use the templateurl attribute. template usage is complicated and will be explained in the next article.
If neither template nor templateurl is specified, this command does not modify or replace the content of the command element. for example, angular learning notes (19th)-command to modify dom
Let's take a look at the demo:
HTML:
<! Doctype HTML> <HTML ng-APP = "dirappmodule">JS:
/* 20.1 command */var dirappmodule = Angular. module ('dirappmodule ', []); dirappmodule. directive ('cdhel', function () {return {restrict: 'eac', template: 'PAGE result:
Note:
1. There are three elements in this page. One is the tag CD-Hello, the other is the DIV has a CD-Hello attribute, and the other is the DIV class named CD-hello.
To allow all three elements to use the cdhello command defined by me, you need to set the restrict value to "EAC ",
E supports <CD-Hello> </CD-Hello>, and a supports <Div CD-Hello> </div>, c supports <Div class = "CD-Hello"> </div>
If I delete one of the EAC items, the corresponding elements will not apply the CD-Hello command...
2. You can see that the instruction is appended to the element of the application instruction using the content in the template.
3. If you change the value of the replace attribute to true:
We can see that the elements of the application commands are replaced. However, note that the class and attributes will still be retained.
Complete Code address: https://github.com/OOP-Code-Bunny/angular/tree/master/OREILLY limit 1. .html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
