ANGULARJS Study notes Two

Instructions

1, restrict: instruction declaration four forms of expression: A (attribute), C (Class), E (Element), M (note), using "Restrict" to configure.

2. Template: The string HTML template generated in the instruction

3, Templateurl: The address of the template

4. Replace: When the original instruction is replaced with the template content, whether to save the original instruction HTML, false when the contents of the template inserted in the original instruction label.

5, Transclude: The original instruction in the middle of the content moved to the template has "ng-transclude" directive belongs to the label position, when True, cover the template label, false, do not overwrite and the original instruction intermediate content discarded.

6, Scope: The scope of the directive, there are three ways to represent the scope:

①scope: {innerargs: ' args '} Independent instruction scope, cannot get to parent scope.

②scope:false inherits from the parent scope.

③scope: {

"Argument1": "@attribute",//one-way binding of Directive internal properties to scope variables

"Argument2": "=attribute",//two-way binding of Directive internal properties to scope variables

"Argument3": "&func"//bind an expression to a scope variable

}

7, compile: DOM operation and processing.

8. Link: The event binding and data binding of the element inside the instruction.

9, CONTROLLER: the instructions in the method exposed to external other instructions to use.

10, require: dependent on the other directive name, usage: require: "^otherdirective"

Application:

<DivNg-app= "App">    <DivNg-controller= "Democtrl">        <HelloToName= "Elic" Hi>This is the original content in the directive.</Hello>        <DivHello ToName= "Elic">This is the original content in the directive.</Div>        <Divclass= "Hello"ToName= "Elic">This is the original content in the directive.</Div>    </Div></Div>

<script src= "~/scripts/angular.js" ></script><script type= "Text/javascript" >varApp = Angular.module ("app", []); App.directive ("Hello",function () {        return{restrict:"ACE", Template:' <div>hello,how is you? <span ng-transclude> This content is covered by the contents of the original instruction </span></div> ', transclude:false,//embed the contents of the middle of the original instruction into the HTML in the template with the "ng-transclude" directive            //when False, the contents of the original instruction are lost and the contents of the template are displayed correctly.Controllerfunction($scope) {$scope. UserName= "";  This. Say =function() {alert ("Hello instruction Call:" +$scope. UserName); }                 This. SetName =function(name) {$scope. UserName=name; }}, Link:function(scope, element, Attrs) {//parameter order is not messy, but name can be customized                varUserName = Attrs.toname;//The attribute defined in the label is "ToName", but the attribute is also used in lowercase                //Scope.sayhello (userName); Calling a method in a scopeScope. $apply ();//the first call will be reported "$apply already in progress" error, do not know the reason ...Scope. $apply ("SayHello ('" + UserName + "')");//Second Call succeeded                //element for angular package setElement.bind ("click",function() {alert (userName);            });    }        };    }); App.directive ("Hi",function () {        return{require:"^hello",//dependent on the "Hello" directive            //The controller in the "Hello" instruction is automatically injected by the fourth parameter, the name can be customizedLinkfunction(scope, element, Attrs, Helloctrl) {helloctrl.setname ("Demo");            Helloctrl.say ();    }        };    }); App.controller ("Democtrl",function($scope) {$scope. SayHello=function(userName) {alert ("Hello," +userName); }    });</script>

ANGULARJS Study notes Two