Angularjs notes--Custom directives

In front-end development, we encounter many places where the same type of control is used. ANGULARJS provides a custom command function that allows us to define a specific HTML template within the directive. provided to the foreground HTML call.

a simple definition of a directive .

The following defines a simple control that is clicked back to the blog park.

Note:1. Naming: directive must start with a lowercase letter, where the HTML is called when it is used-separate the words if they are followed by uppercase letters.

'Angular.js'></script><script type="Text/javascript">Angular.module ('MyApp', []). Directive ('Mycnblogs', function () {return{restrict:'E',
Replace:false, Template:'<a href= "http://www.cnblogs.com/" >go to cnblogs</a>'        }    })</script>'MyApp'> <my-Cnblogs></my-Cnblogs> </div>
two. Instruction element Description:
2.1 Restrict
Commonly used restrict have e,a,c three kinds of settings. These settings can be mixed, such as Ea,ac. Do not need to be separated by symbols
E (Element): elements, using a format of <my-directive></my-directive>
A (propertity): attribute, using format: <div my-directive></div>
C (Class): class, using format: <div class= ' my-directive ' ></div>
2.2 Repleace
 The following is the effect of the replace set false and True respectively

2.3 Termplate:
 The template is to set the corresponding HTML templates, if there is HTML wrap that will be at the end of each sentence add/sign. If the HTML code is large, you can load the code template for the Templateurl:urlpath by setting the
Three. Adding data to internal directives
3.1 The following is a simple implementation of data binding by setting scope.
<! DOCTYPE Html>'Angular.js'></script><script type="Text/javascript">Angular.module ('MyApp', []). Directive ('mydirective', function () {return{restrict:'A', replace:true, scope:{Myurl:"@", mycontent:"@"}, Template:'<a href= "{{myurl}}" >{{mycontent}}</a>'        }; });</script>'MyApp'> <div my-directive myurl='http://www.cnblogs.com/'Mycontent='Go to Blogs'></div> </div>
3.2 In-depth understanding bindings for custom control scopes
Custom control bindings $scope is divided into @,=,& three cases. Personal Think @: one-way binding, =: two-way binding, &: For binding functions, take a look at the introduction of Angularjs authoritative guide
@ Local Scope Properties: Use the @ symbol to bind the local scope to the value of the DOM property.
= Bidirectional binding: by = You can make two-way data binding on properties on the half-level scope of a property on the local scope. Just like normal data binding, local properties reflect changes that occur in the parent data model
& Parent Scope bindings through the & symbol, you can bind the parent scope to run the function in it. means that setting this value generates a wrapper function that points to the parent scope.
The following demo implements the binding of three cases.
<! DOCTYPE Html>'Angular.js'></script><script type="Text/javascript">Angular.module ("myApp", []). Directive ("MyDir", function () {return{restrict:"A", scope: {name:"@", desc:"=", Show:"&"}, Template:"<div>"+"<input type= ' text ' ng-model= ' name '/>: <input ng-model= ' desc '/>"+"<button ng-click= ' show () ' >show</button>"+"</div>", replace:true, link:function (scope, element, Attrs) {Console.log ("initial value for name:"+scope.name); Console.log ("Initial value for description:"+scope.amount); Scope. $watch ("desc", function (newval, oldval) {Console.log ("Desc has changed"+ Oldval +">>"+newval);                        }); Scope. $watch ("name", function (newval, oldval) {Console.log ("name has changed"+ Oldval +">>"+newval);            }); }}). controller ("Myctrl", Function ($scope) {$scope. CustomerName="Frank"; $scope. Content='Learning Angular'; $scope. Show=function (source) {alert (source);    }; })</script>"Utf-8"/> <title></title>"myApp"Ng-controller="Myctrl"> "text"Ng-model='CustomerName': <input ng-model="content"/> <button ng-click="Show (' normal function ')">show</button> dir name="{{CustomerName}}"desc="content"Show="Show (' Custom directive binding function ')"> </div></body>
Here are the following:
Four. Summary:
This chapter introduces the simple and practical application of custom directives. You can use custom directives to encapsulate HTML templates for many specific functions for page invocation. You can try to change the above demo's & to @ or =, tested to the @ symbol, the Show method of the custom directive cannot be executed. It would be interesting to change the = number. Clicking on the btn above will perform two times the Show method. Then modify any of the input, and the show method below will be executed. If a blogger knows what the reason is, please reply online. This principle is not clear what the reason is.
 Angularjs Notes--Custom directives