Home > Developer > Web Develop
Directives are essentially the way Angularjs extends HTML elements with custom functionality.
In HTML to mark out the application's root node with the built-in directive Ng-app, this instruction needs to be used as an attribute, so it can be written anywhere, but it is the most common practice to write to the All built-in directives use NG as a prefix for namespaces. To prevent namespace collisions, do not add a NG prefix to a custom directive
To create a custom directive
<my-directive></my-directive>
Angular.module (' myApp ', []) . Directive (' mydirective ', function() { return { restrict: ' E ' , Template: ' <a href= ' http://google.com ">click me to go to google</a> ' };}); At run time, the interface Click me to go to Google instead of <my-directive></my-directive> tags
register a new instruction by passing in a string and a function through the. Directive () method in the Angularjs module . Where the string is the name of the instruction, the instruction name should be the hump naming style, the function returns an object
The object returned by the directive () method contains the methods and properties that are required to define and configure directives.
built-in directives:Basic ng Property directives:
? Ng-href;? NG-SRC;
<a ng-href= "{{myhref}}" >i ' m feeling lucky, when I load</a> />Boolean property:
? ng-disabled;? ng-checked;? Ng-readonly;
Example:
// write is null when the input box is not entered, then! Write is true, at this point the button can not click, enter,!write is False, you can click <input type= "text" ng-model= "write" placeholder= "Please enter" >< Button ng-disabled= "!write" > Submit </button>
Check and ReadOnly are the same.
? ng-selected;
// check and select are bound <input type= "checkbox" ng-model= "Istwofish" ><br/><select> <option>one fish</option> <option ng-selected= "Istwofish" >two fish</option> < Option >222O fish</option></select>
Ng-repeat
Ng-repeat is used to traverse a collection or generate a template instance for each element in the collection. Each element in the collection is assigned its own template and scope. At the same time, some special properties are exposed in the scope of each template instance.
? $index: The progress of the traversal (0...length-1).
? $first: True when the element is the first value to traverse.
? $middle: The value is true when the element is between the first and last elements.
? $last: True when the element is the last value to traverse.
? $even: True when the $index value is even.
? $odd: True when the $index value is an odd number.
The following example shows how to use $odd and $even to create a red-and-blue list. Arrays in JavaScript
The index starts at 0, so we use! $even and! $odd to invert the Boolean values of $even and $odd.
<ul ng-controller= "Peoplecontroller" > <li ng-repeat= "person in people" ng-class= "{even:! $even, Odd:! $odd}" & Gt {{Person.name}} lives in {{person.city}} </li></ul>
. odd {}.even {}angular.module (' myApp ', []). Controller (' Peoplecontroller ', function($scope) {$scope. peopl E = [{name: ' Ari ', City: ' San Francisco '}, {name: ' Erik ', City: ' Seattle '}]; });The ng-init ng-init directive is used to set the initial state of an internal scope when the instruction is invoked.
{{ }}
<div>{{name}}</div>
The {{}} syntax is a ANGULARJS built-in template syntax that creates bindings between internal $scope and views. Based on this binding, the view is automatically updated as soon as the $scope is changed.
In fact it is also an instruction, although it does not look like, in fact it is a shorthand form of ng-bind, which does not need to create new elements in this form, so it is often used in inline text.
Note that using the {{}} in the area visible on the screen causes the element that is not rendered to flicker when the page loads, and ng-bind can avoid this problem.
<body ng-init= "greeting= ' HelloWorld '" >
{{Greeting}}
</body>
Ng-bind
<body ng-init= "greeting= ' HelloWorld '" >
<p ng-bind= "Greeting" ></p>
</body>
Ng-cloak
In addition to using ng-bind to avoid flicker of non-rendered elements, you can also use the NG-CLOAK directive on elements containing {{}}:
<body ng-init= "greeting= ' HelloWorld '" >
<p ng-cloak>{{Greeting}}</p>
</body>
The ng-cloak instruction hides the inner element until it is displayed when the corresponding page is called.
Ng-bind-template
Similar to the Ng-bind Directive, ng-bind-template is used to bind multiple expressions in a view.
<div
Ng-bind-template= "{{message}}{{name}}" >
</div>
Ng-model
The Ng-model directive is used to bind input, select, text area, or custom form controls to the properties in the scope in which they are contained . It can provide and handle form validation, set up related CSS classes (ng-valid, Ng-invalid, and so on) on elements,and be responsible for registering controls in the parent form.
It binds the value of an operation expression in the current scope to the given element. If the property does not exist, it is implicitly created and added to the current scope.
We should always use Ngmodel to bind properties $scope the previous data model, not properties on $scope, which avoids property overrides in scope or descendant scopes. For example:
<input type= "text" ng-model= "Modelname.someproperty"/> $scope. ModelName = { someproperty: ...}
Ng-show/ng-hide
Ng-show and Ng-hide display or hide HTML elements based on the value of the given expression. When the value assigned to the ng-show instruction is false, the element is hidden. Similarly, when the value assigned to the ng-hide instruction is true, the element is also hidden.
<DivNg-show= "2 + 2 = = 5">2 + 2 isn ' t 5, don ' t show</Div><DivNg-show= "2 + 2 = = 4">2 + 2 is 4, do show</Div><DivNg-hide= "2 + 2 = = 5">2 + 2 isn ' t 5, don ' t hide</Div><DivNg-hide= "2 + 2 = = 4">2 + 2 is 4, do hide</Div>
Ng-if
You can use the NG-IF directive to generate or remove an element in the DOM entirely based on the value of an expression. If the value of the expression assigned to Ng-if is false, the corresponding element will be removed from the DOM, otherwise a clone of the corresponding element will be reinserted into the DOM
The most essential difference between ng-if and no-show and ng-hide directives is that it does not show or hide DOM nodes through CSS, but rather actually generates or removes nodes.
Ng-change .
This instruction calculates the value of the given expression when the form input changes. Because to handle form input, this command is used in conjunction with Ngmodel.
<div ng-controller= "Equationcontroller" > <input type= "text" ng-model= "equation.x" ng-change= "Change () "/> <code>{{equation.output}}</code> </div>var app = Angular.module (" app ", []); App.controller (' Equationcontroller ', function($scope) { $scope. Equation = {}; $scope. Change = function() { $scope. equation.output= parseint ($scope. equation.x) + 2; };}); As long as the content in the text input field changes, the value of the equation.x is changed, and the Change () function is transported.
Ng-form .
Ng-form is used to nest another form inside a form. Normal HTML <form> tags do not allow nesting, but
Ng-form can.
This means that external forms are legitimate when all of the child forms inside are legitimate.
? Set Ng-valid when form is valid;
? Set Ng-invlid when the form is not valid;
? Set ng-pristion when the form is not modified;
? Set Ng-dirty when the form has been modified.
Angular does not submit the form to the server unless it specifies the Action property. To specify which one to invoke when submitting a form
JavaScript method, use one of the following two instructions.
? Ng-submit: Used on form elements.
? Ng-click: Used on the input field of the first button or the submit type (Input[type=submit]).
Ng-select .
Ng-select is used to bind data to the <select> elements of HTML. This command can be used with Ng-model and
The ng-options instruction is used together to build a fine and well-behaved dynamic form.
The value of ng-options can be in the following two forms.
? Array as the data source:
? tag with the values in the array;
? Use the values in the array as the selected label;
? Use the values in the array to label groups;
? Use the values in the array as the selected label group.
? Object as the data source:
? Use the object's key value (Key-value) to label;
? Use the object's key value as the selected label;
? Use the object's key value as the label group;
? Use the object's key value as the selected label group.
Let's look at an example of a ng-select instruction
<DivNg-controller= "Cityselection"> <SelectNg-model= "City"ng-options= "City.name in cities"> <optionvalue="">Please select</option> </Select>Best city : {{city.name}}</Div>app.controller (' cityselection ', function ($scope) {$scope. Cities = [{name: ' Beijing '}, {name: ' On Sea "}, {name:" Guangzhou "}, {name:" Shenzhen "}]});
Ng-submit
Ng-submit is used to bind an expression to an onsubmit event. This command also blocks the default behavior (sending the request and reloading the page) unless the form does not contain an Action property.
<formNg-submit= "Submit ()"Ng-controller= "Formcontroller">Enter text and hit ENTER:<inputtype= "text"Ng-model= "Person.name"name= "Person.name" /> <inputtype= "Submit"name= "Person.name"value= "Submit" /> <Code>People={{people}}</Code> <ulng-repeat= "(Index, object) in people"> <Li>{{Object.name}}</Li> </ul> </form>app.controller (' Formcontroller ', function ($scope) {$scope. person = {Name:null}; $scope. People = []; $scope. Submit = function () {if ($scope. person.name) {$scope. People.push ({name: $scope. Person.name} ); $scope. Person.name = "; } } });
Ng-class
Use Ng-class to dynamically set the class of an element by binding an expression that represents all the classes that need to be added. Duplicate classes are not added. When an expression changes, the previously added class is removed and the new class is added
The following example adds a. Red class to a div with ng-class at a random number greater than 5 o'clock:
<DivNg-controller= "Lotterycontroller"> <DivNg-class= "{red:x > 5}"ng-if= "x > 5">You won! </Div> <ButtonNg-click= "x = Generatenumber ()"Ng-init= "x = 0">Draw number</Button> <P>Number is: {{x}}</P> </Div>If the value of x is greater than 5, then the DIV returns with the red style, if the value of x is less than 5, then the default style
App.controller (' Lotterycontroller ', function ($scope) {$scope. Generatenumber = function () {return math.ra Ndom () *10+1; } });
AngularJS command System
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
