Custom directives in Angularjs

Studied angularjs for a week, but most of the time was consumed by custom instructions. Bloggers said that self-learning Internet good-hearted plug, found that the vision of the problem is very narrow, which is more difficult than solving the problem. This article first describes the customizations, and then describes the issues that you encounter when you use custom directives.

Code Template:

var mymodule = angular.module ("MyModule", []);

Mymodule.directive (' Directivename ', function () {

return{restrict:string,

Template:string,

Templateurl:string, Replace:boolean,

Transclude:boolean,

Scope:bollean or object,

Link:function (scope,element,attrs) {},

Compile:function (element,attrs,transclude) {} ...

}

. directive (' instruction name ', [parameter 1, parameter 2, ... function (formal parameter 1 ', formal parameter 2 ', ...) {}])//The parameter is fixed.

The first parameter is the name of the directive. Define the name of the directive, which should use the Hump naming method, use-connect.

The second parameter uses an array, which is to prevent escaping after compressing the code. The last element of the array is a function.

Restrict: Specifies how to use a custom directive in a template, preferably one or any combination of E, a, C, M. The default value is a.

E: Represents the name of the element; A: Represents the attribute of the element; C: Represents the Class;m in the CSS: represents a comment.

Elements and tags used:

Div ng-controller= "Incontroller" >    <!--inputdirct as Properties--    <div  add-one= "name" add-two= " Name "INPUTDIRCT class=" Div1 "> </div>     </br></br>    <!--inputdirct as label     <INPUTDIRCT add-one= "name" add-two= "name" ></inputdirct></div>

Template: inline templates for directives;

Template: The URL of the inline templates for the directive;

Replace: If the value is pseudo true, the template replaces the element that contains the instruction, and if False, the template is placed inside the element where the instruction is located. The default value is False.

Transclude: Moves the child element of the instruction element to the inside of the directive inline template.

Scope:false: The scope object of the custom directive is the scope object (scope) where the directive is located true: the custom directive establishes a scope object and inherits the outer scope.

Object: The custom directive creates a scope object that does not inherit the outer scope, which is isolated from the outer scope.

Custom Directives Scope communication: Pass property name mappings to the specified attribute in the parent scope to this independent scope.

The binding method is as follows:

(1) @: One-way text binding, passing a string value. When the parent scope property changes, the value of the attribute in the isolated scope changes, and the property value of the parent scope does not change when the value of the property in the isolated scope changes.

(2) =: two-way binding, passing the parent scope of the property, the data type passed can be a string, an array, an object, and so on. When the parent scope property changes, the value of the property in the isolated scope changes, and the properties of the parent scope change when the properties in the isolated scope change.

(3) &: Performs the function expected in the parent function.

Analysis: @ and = Difference

<div ng-controller= "Incontroller" > <inputdirct add-one= "name" add-two= "name" ></inputdirct></ div> <script src= "Bower_components/angular/angular.js" ></script> <script>varApp = Angular.module ("app",[]); //ControllerApp.controller (' Incontroller ', [' $scope ',function($scope) {//$scope. inputdate = ";$scope. Name= ' Lishuyi ';//assign ' Lishuyi ' to name in controller, add to Properties Add-one and Add-two$scope. $watchCollection (' Name ',function(now,old) {Console.log (now)});     }]); //Custom DirectivesApp.directive ("INPUTDIRCT",function(){          return{restrict:' EA ', Scope:{addone:‘@‘, AddTwo:=}, Template:‘<span> using @ one-way text binding {{addone}}</span></br> <span> using = Bidirectional text binding {{addtwo}}</span>< /c3>‘,                  //using the @ and = reference Add-one and add-two respectively, the output from the browser can be found, the value of the Add-one attribute in the DI element of the @ output, and = output is the name assigned in the controller.                      }     });

Compile, Link: These two options relate to the life cycle of ANGULARJS.

Custom directives in Angularjs