Home > Developer > Web Develop
One, custom directives:
1. First create the module var app=angular.module ("MyApp", []);
2. Create a custom directive (parameter one after directive: the name of the custom directive, parameter two: The function return value is an object template is templates)
App.directive ("Shen", function () {
return {
Template: " }
})
3. Scoping the module, using custom directives<body ng-app= "MYAPP" >
<shen></shen>
Second, template--Introduction of external documents
Above is the basic use of templates, templates can also reference external files, when the content of the template is slightly larger, reference to external files better
To define a template file, it is best to place files as templates in the template folder uniformly. Template files do not need HTML, body and other tags, directly write the template tag you need to
In this case, the template in the custom directive is replaced with Templateurl, followed by the relative path of the script file, and the other unchanged
Third, write the template in the script tag
Create a new script tag, this tag must have an ID, and type,id random name, type is fixed type= "text/ng-template".
Write a template in this script tag, which is written in the same way as the general label.
In this case, the templateurl corresponding value in the custom directive is the ID name of the script tag
Iv. different ways to implement custom directives
The custom directives in the above methods are implemented in the form of tags, in fact, custom directives can also be implemented in the form of attributes and class names
When written in the form of a class name, you must also add the Restrict property when you define the directive (the way you use properties and labels does not write or display normally)
Restrict is the "limit" meaning, the attribute value can be E (element), A (attribute), C (Class), when you want to implement the way can only be a label, you can write restrict: "E", Restrict: "EAC" means that three ways can be And so on
V. Customizing template content
The above template content is fixed, the actual development of the template content is generated by the project needs, how to make each template content is different? Using transclude
1. Add Ng-transclude to the label in the template (if you need to customize the contents of a tag to add the Ng-transclude attribute, if you want to be a fixed value you do not need to add)
2. Add Attribute Transclude:true
2. When implementing a custom directive, write the custom content in the instruction label
angularjs--Custom directives and templates
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
