AngularJS supports user-defined tag properties and add custom content without using DOM node operations.
The four major features of AngularJS are mentioned earlier:
1 MVC
2 Modular
3 Instructions
4 Two-way data binding
The following will be introduced:
1 How to customize the command
2 Use of custom instructions
3 Inline usage of custom directives
How to customize directives:
Angular is a module-based framework, so you must create your own module:
var myAppModule = angular.module("myApp",[]);
Then create directive on this module
myAppModule.directive("xingoo",function(){ return{ restrict:'AECM', template:'<div>hello my directive</div>', replacement:true } });Among them, xingoo is the name of our custom tag, followed by its method function.
The function returns a key-value pair combination, which defines the usage methods, properties, etc. of the tag.
Let's see what it defines:
1 restrict: defines the usage methods of tags, with a total of four types, namely AECM
2 template: Define the template for the tag. Inside is a string used to replace custom tags
3 replacement: Whether to support replacement
4 transclude: Whether to support embedded
How to use the command:
The above mentioned four ways to use labels, namely AECM.
A attribute: used as an attribute
<div xingoo></div>
E element: Used as a label element
<xingoo></xingoo>
C class: Used as CSS style
<div></div>
M comments comments: Used as comments (this method is not available in version 1.2!)
<!-- directive:xingoo -->
<div></div>
Generally speaking, it is recommended to use it as attributes and elements.
When you want to extend attributes on existing html tags, use the attribute method.
When you want to customize the tag, take the form of a tag.
To use that method, you must declare the corresponding letter in the restrict in the definition directive.
Inline usage of directives:
Because other tags can be nested inside the tag, if you want to nest other element tags in a custom tag, you need:
1 Use the transclude property, set to true.
2 And use the ng-transclude property to define the internal nested location.
The code is as follows:
myAppModule.directive("test",function(){ return{ restrict:'AECM', translate:true, template:"<div>haha! <div ng-transclude></div> wuwu!</div>" } });All codes
<!doctype html><html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body> <xingoo></xingoo> <div xingoo></div> <div></div> <!-- directive:xingoo --> <div></div> <hr> <xingoo>3333</xingoo> <hr> <test>4444</test> <script type="text/javascript"> var myAppModule = angular.module("myApp",[]); myAppModule.directive("xingoo", function(){ return{ restrict:'AECM', template:'<div>hello my directive</div>', replacement:true } }); myAppModule.directive("test", function(){ return{ restrict:'AECM', transclude:true, template:"<div>haha! <div ng-transclude></div> wuwu!</div>" } }); </script> </body></html>Running results
The above is the information sorting out the AngularJS custom directives. We will continue to add relevant information in the future. Thank you for your support for this site!