Home > Developer > Web Develop
The front is a little messy, and some wordy, will notice later. I hope that the article I write can help you.
1, what is an instructionIn a nutshell, the instructions are to create a set of tag elements, attributes, classes, and annotations that you can identify in the HTML page to angularjs the function reuse.
2, creating instructions<!DOCTYPE HTML><HTMLNg-app= "MyModule"><Head> <MetaCharSet= "Utf-8"> <title></title></Head><Body> <!--the first mode of the instruction is E - <Hello></Hello> <!--Second mode of instruction a - <DivHello></Div> <!--the third mode of instruction C - <Divclass= "Hello"></Div> <!--Fourth mode M of the instruction - <!--Directive:hello - <Div></Div> <Scriptsrc= "Js/angular-1.3.0.js"></Script> <Scriptsrc= "Js/hello.js"></Script></Body></HTML>
From the above code can be seen, the instructions are four ways to create, the above four modes correspond to the following JS code in the Restrict attribute AEMC.
var mymodule = Angular.module ("MyModule", []);
Create instruction Mymodule.directive (' hello ',function() { return{ Restrict: ' AEMC ', // match mode A: attribute E: element M: note c:class Template: ' <div>hello world</div > ', replace:true }})You can create it yourself.
3, instruction--restrictThe meaning of restrict means constraint, which is defined as the four matching modes available in this directive.
So many patterns, what scenarios should we use?
4, instruction--template
The use of templates (code snippets) we have in 4 ways.
// when the syringe loads all modules, this method executes once, and the cache template Mymodule.run (function( $templateCache) {// Console.log ("323"); The HTML file is virtual and can be any name $templateCache. Put (' hellos.html ', ' <div>hello everyone '. </div> ")}) mymodule.directive (' hello ',function($templateCache) { Return{ restrict:' AECM ', Template: $templateCache. Get (' hellos.html ') , Replace:true })Replace meaning substitution, substitution meaning. If the command is nested, it needs to be changed.
Html:
< Hello > < Div >nihao</div> </Hello >
Js:
Mymodule.directive (' hello ',function() { return{ restrict:' AE ', transclude: true , Template:' <div>hello everyone <div ng-transclude></div></div> ', }})Using the Ng-transclude method here, the function of this method is to let Angularjs put the contents of the instruction nested in the tag with the Ng-transclude attribute.
6, instruction--compile (compile phase)Angularjs The default function, we can customize the function and execute when the instruction dome changes.
7, instruction--link (link stage)Inside the link function, you can bind an element to an event.
8, summaryAbout the other properties and methods of the directive, we need to go to the official website to look for themselves. My side will also upload this code to my GitHub (https://github.com/NIKing/angularJs.git).
angularjs-Directive 1
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
