ANGULARJS Directive Example

Mentioned earlier Angularjs's Factory,service,provider, this can be understood as PHP model, this model is not with HTML, today's directive, can also be interpreted as PHP model, Can also be understood as plug-ins, except that the model is HTML, for example: PHP paging function.

One, ANGULARJS directive common format, and parameter description

1, Direct return

phonecatdirectives = Angular.module (' phonecatdirectives '), []); Phonecatdirectives.directive (' Directivename ',function($inject) {return{Template:' <div></div> ', replace:false, transclude:true, restrict:E, scope: {...}, Controller:function($scope, $element) {...}, compile:function(TElement, Tattrs, transclude) {return{pre:functionprelink (Scope, ielement, Iattrs, controller) {...}, post:functionPostlink (Scope, ielement, Iattrs, controller) {...} }}, Link:function(Scope, ielement, Iattrs) {...}  };  }); 

2, define a JS domain

Ar phonecatdirectives = angular.module (' phonecatdirectives ', []);    Phonecatdirectives.directive (function($inject) {       var mydi = {     ' <div></div> ',        ....,     function(scope, ielement,.) ....., A. Iattrs) {...}     };        return Mydi;  

3,ANGULARJS directive Description of the image parameters

Name-the names of the current scope, which can be used at the time of registration (not required).

Priority-when more than one directive is defined on the same DOM element, it is sometimes necessary to clarify the order in which they are executed. This property is used to sort before the directive compile function call. If the precedence is the same, then the order of execution is indeterminate (initially, high priority is performed first, and at the same time, it is performed at the same level as the stack-like "post-binding".) In addition, the test is a bit careless, when defining directive, two times defined a directive of the same name, but the execution results found that two compile or link function will be executed).

Terminal (last group)-if set to "true", indicates that the current priority will be the last set of Directive executed. Any directive is the same as the current priority, they will still execute, but the order is indeterminate (although the order is indeterminate, it is basically consistent with the order of precedence.) The lower priority will no longer execute after the current priority is executed.

Scope-If set to:

True-a new scope will be created for this directive. If there is more than one directive in the same element that requires a new scope, it will only create a scope. The new scope rule does not apply to the root template (root of the template), so the root template often gets a new scope.

{} (object hash)-A new, independent (isolate) scope will be created. The difference between the "isolate" scope and the general scope is that it is not inherited from the parent scope by the prototype. This is useful for creating reusable components that can effectively prevent data from being read or modified by the parent scope. This standalone scope creates an object hash that has a set of local scope properties from the parent scope (the locals scope property). These local properties are useful for creating aliases of values for templates (useful for aliasing values for templates-_-!). A local definition is a hash mapping of a set of local scope property on its origin (Locals definition is a hash of the the local scope property to its source #&) $&@#) ($& amp;@ #_):

@ or @attr-establishes a local scope property to the DOM attribute binding. Because the property value is always a string type, this value always returns a string. If the property name is not specified by @attr, then the local name will remain with the name of the DOM attribute. For example <widget my-attr= "Hello {{name}}" >,widget scope is defined as: {localname: ' @myAttr '}. Then, the localname of the widget scope property maps the true value after the conversion of "Hello {{name}}". When the Name property value is changed, the LocalName property of the widget scope also changes accordingly (only one-way, different from the following "="). The Name property is read from the parent scope (not the component scope)

= or =expression (this may be attr)-sets a two-way binding between the local scope property and the parent scope property. If you do not specify a attr name, the local name will be the same as the property name. For example <widget my-attr= "Parentmodel" >,widget defined scope is: {localmodel: ' =myattr '}, then the Widget scope property "LocalName" The "Parentmodel" of the parent scope will be mapped. If there is any change in Parentmodel, Localmodel will change, and vice versa. (Bidirectional binding)

& or &attr-Provides a way to execute an expression in the context of the parent scope. If you do not specify a name for the attr, the local name will be the same as the property name. For example <widget my-attr= "Count = Count + value" >,widget scope is defined as: {localfn: ' Increment () '}, then isolate scope property " LOCALFN "will point to a function that wraps around the increment () expression. In general, we want to pass data from isolate scope to parent scope through an expression. This can be done by transferring a local variable key value mapping to the wrapper function of the expression. For example, if the expression is increment (amount), then we can call LOCALFN by LOCALFN ({amount:22}) to specify the value of amount (the example above really does not understand,& where to run?). ）。

Controller-controller the constructor function. The controller initializes before the Pre-linking step and allows the other directive to be shared by the require of the specified name (see the Require property below). This will allow directive to communicate with each other and enhance the behavior between them. The controller injects the following local objects by default:

$scope-scope that is combined with the current element

$element-The current element

$attrs-Property object for the current element

$transclude-A transpose linking Function:function (CLONELINKINGFN) that is pre-bound to the current transpose scope. (A transclude linking function pre-bound to the correct transclusion scope)

Require-Request another controller to pass in the linking function of the current directive. Require need to pass in the name of a directive controller. If the controller is not found for this name, an error will be thrown. The name can include the following prefixes:

? -Do not throw an exception. This makes this dependency an optional option.

^-Allows the controller to find the parent element

A RESTRICT-EACM of a subset of strings, which restricts directive to the specified declaration method. If omitted, directive will only allow property declarations:

E-element name: <my-directive></my-directive>

A-Attribute name: <div my-directive= "Exp" ></div>

C-class Name: <div class= "MY-DIRECTIVE:EXP;" ></div>

M-Note: <!--directive:my-directive Exp--and

Template-If replace is true, replaces the template content with the current HTML element and migrates the original element's attributes, class, or false to treat the template element as a child of the current element. To find out more, check out the "Creating Widgets" section (where ... Creating components have ... ）

Templateurl-The template is basically consistent, but the template is loaded with the specified URL. Because the template loading is asynchronous, compilation, linking are paused, waiting for the load to be completed before executing.

Replace-if set to True, the template replaces the current element instead of being added to the current element as a child element. (Note: When True, the template must have a root node)

Transclude-compiles the contents of the element so that it can be used by the directive. You need to use (reference) with Ngtransclude (in the template). The advantage of transclusion is that linking function can obtain a transclusion function that is pre-bound to the current scope. In general, create a widget that creates a isolate scope,transclusion not a child, but rather a sibling of isolate scope. This will allow the widget to have a private state, and the transclusion will be bound to the parent (pre-isolate) scope. (The above paragraph did not read.) But in the actual experiment, if mydirective is called through <any my-directive>{{name}}</any my-directive>, When Transclude is set to TRUE or a string and the template contains <sometag ng-transclude>, the compilation result of {{name}} is inserted into the contents of Sometag. If the content of any is not wrapped in a label, then the result will be a span in Sometag. If something else had been wrapped, it would have remained intact. However, if transclude is set to ' element ', the whole content of any will appear in Sometag and be wrapped by P.

True-Converts the contents of this directive. (In this sense, the content is directly compiled and moved into the specified place.)

' Element '-converts the entire element, including other lower-priority directive. (as if the whole content is compiled, as a whole (outside the package p), inserted into the specified place)

Compile-here is the compile function, which will be explained in detail in the following example

Link-This is the link function, which will be explained in detail below. This property is used only if the Compile property is not defined.

Three, ANGULARJS Directive example explanation

The following examples are all centered around the parameters above to expand the

1,directive Declaration Mode Instance

//a mytest is defined in the directive file Directives.js' Use strict '; varphonecatdirectives = Angular.module (' phonecatdirectives '), []); Phonecatdirectives.directive (' MyTest ',function() {      return{restrict:' Acem ', require:' ^ngmodel ', scope: {ngmodel:=}, Template:' <div>      }  }); //controller file Controller.js defined in directive1' Use strict '; varDtcontrollers = Angular.module (' dtcontrollers '), []); Dtcontrollers.controller (' Directive1 ', [' $scope ',      function($scope) {$scope. Name= ' This is Tank test ';    }  ]); //integrate controller,directive in app file App.js' Use strict '; varPhonecatapp = Angular.module (' Phonecatapp '), [      ' Phonecatdirectives ',      ' Dtcontrollers '  ]); //HTML file<script src= ". /lib/angular/angular.js "></script> <script src=". /js/app.js "></script> <script src=". /js/controller.js "></script> <script src=".          /js/directives.js "></script> <body ng-app=" Phonecatapp "> <div ng-controller=" directive1 "> <input type= ' text ' ng-model= ' city ' placeholder= ' Enter a city '/> <my-test ng-model= ' city ' >< /my-test> <span my-test= "exp" ng-model= "City" ></span> <!--directive:my-test exp--&G          T <span ng-model= "City" ></span> </div> </body>

The above example results in:<!--directive:my-test exp--and this does not work, do not know why, try a lot of methods do not work.

2,template and Templateurl differences and linkages

Templateurl in fact, the root template function is the same, but Templateurl loading an HTML file, the above example, we can also find the problem, template behind the root of the HTML tag, if the label a lot of it, it is more uncomfortable. You can change the template in the example above.

function () {      return  {          ' Acem ',          ' ^ngmodel ',          scope: {              ' = '           },          Templateurl:'. The content in/partials/tem1.html '   //tem1.html is the template in the previous example.       }  });  

3,scope Redefine

//directives.js defined in myattrPhonecatdirectives.directive (' myattr ',function() {      return{restrict:E, scope: {customerinfo:' =info '}, Template:' Name: {{customerinfo.name}} Address: {{customerinfo.address}}<br> ' + ' name: {{vojta.name}} Addre SS: {{vojta.address}} '      };    }); //controller.js defined in AttrtestDtcontrollers.controller (' attrtest ', [' $scope ',      function($scope) {$scope. Naomi= {name: ' Naomi ', Address: ' Amphitheatre ' }; $scope. Vojta= {name: ' Vojta ', Address: ' 3456 somewhere Else ' };    }  ]); //in HTML<body ng-app= "Phonecatapp" > <div ng-controller= "attrtest" > <my-attr info= "Naomi" ></my-a Ttr> </div> </body>

ANGULARJS Directive Example