ANGULARJS supports user-defined label properties and adds custom content without the need for DOM node operations.
The four characteristics of Angularjs mentioned above:
1 MVC
2 Modular
3 Instructions
4 Bidirectional data binding
The following will be described below:
1 How to customize instructions
2 Use of custom directives
3 inline use of custom directives
How to customize directives:
Angular is a modular framework, so it's definitely going to create a module of its own:
var myappmodule = angular.module ("myApp", []);
Then create the directive based on this module directive
Myappmodule.directive ("Xingoo", function () {
return{
restrict: ' AECM ',
Template: ' <div>hello my Directive</div> ',
repalce:true
}
});
Where Xingoo is the name of our custom tag, followed by its method function.
function return a combination of key-value pairs, which defines how tags are used, attributes, and so on.
So let's see what it all defines:
1 Restrict: Defines the use of the label, a total of four species, respectively, is AECM
2 Template: Defines the template for the label. Inside is a string to replace the custom label
3 Repalce: whether to support replacement
4 transclude: Do you support inline
How to use directives:
The above mentioned four ways to use the label, namely AECM.
A attribute: Use as A property
<div xingoo></div>
E element elements: using as label elements
<xingoo></xingoo>
C class classes: use as CSS style
<div class= "Xingoo" ></div>
M comments Note: used as a comment (this method is not available in the 1.2 version!) ）
<!--Directive:xingoo-->
<div></div>
Generally recommended, as attributes and elements to use.
Attributes are used when you want to extend an attribute on an existing HTML tag.
When you want to customize the label, take the form of a label.
To use that method, you must declare the corresponding letter in the restrict in the definition directive.
Inline use of directives:
Because you can nest other tags inside a label, you want to nest additional element tags in a custom label, you need to:
1 Using the Transclude property, set to True.
2 and use the Ng-transclude property to define the location of the internal nesting.
The code is as follows:
Myappmodule.directive ("Test", function () {
return{
restrict: ' AECM ',
transclude:true,
Template: " <div>haha! <div ng-transclude></div> wuwu!</div> "
}
});
All code
<!doctype html>
Run results
The above is the ANGULARJS custom instructions of the data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!
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
