AngularJS directives
The new property is called by AngularJS directives to extend HTML.
AngularJS built-in instructions for the application to add functionality.
AngularJS allows you to customize instruction.
AngularJS directives
AngularJS instruction is an extension of HTML attributes with the prefix ng-.
ng-app instructions to initialize a AngularJS application.
ng-init command to initialize the application data.
ng-model command the element values (such as the value of the input field) bound to the application.
Complete instructions can be found in the contents of AngularJS reference manual .
AngularJS examples
<p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>
</div>
try it"
ng-app directive tells AngularJS, <div> element is AngularJS application of the "owner."
A Web page can contain multiple run AngularJS applications in different elements. |
Data Binding
In the above example {{firstName}} AngularJS expression is a data-binding expression.
AngularJS data bindings, synchronized with AngularJS AngularJS expression data.
{{FirstName}} by ng-model = "firstName" synchronization.
In the next example, two text field is computed via two synchronization instruction ng-model:
AngularJS examples
<h2>价格计算器</h2>
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
<p><b>总价:</b> {{ quantity * price }}</p>
</div>
try it"
Use ng-init is not very common. You will learn to be a better way to initialize the data in the controller chapter. |
Repeat HTML elements
ng-repeat instruction repeats an HTML element:
AngularJS examples
<P> Use ng-repeat to loop through the array </ p>
<Ul>
<Li ng-repeat = "x in names">
{{X}}
</ Li>
</ Ul>
</ Div>
try it"
ng-repeat instruction is used in an array of objects:
AngularJS examples
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
try it"
CRUD AngularJS perfect support database (increase Create, read Read, Update Update, Delete Delete) applications. Think of examples of objects into records in the database. |
ng-app directive
ng-app directive defines the root element AngularJS application.
ng-app instructions when the page is loaded automatically booted (automatic initialization) applications.
Later you will learn how to ng-app by a value (for example, ng-app = "myModule") connected to the code module.
ng-init command
ng-init instruction AngularJS application defines the initial value.
Under normal circumstances, do not use ng-init. You will use a controller or module to replace it.
Later you will learn more about controllers and modules.
ng-model directive
ng-model directive bind HTML elements to the application data.
ng-model directive can also:
- Provide verification of application data type (number, email, required).
- Provides status for the application data (invalid, dirty, touched, error).
- Provide CSS classes for HTML elements.
- Bind HTML elements to the HTML form.
ng-repeat instruction
ng-repeat instruction for collection (array) of each item will clone a HTML element.
Create a custom command
AngularJS addition to the built-in instructions, we can also create custom commands.
.directive Function you can use to add custom commands.
To call a custom command, you need to add a custom command name on the HTML element.
Use hump method to name adirective, w3bigDirective, but when you need to use it -segmentation, w3big-directive:
AngularJS examples
<W3big-directive> </ w3big -directive>
<Script>
var app = angular.module ( "myApp", []);
app.directive ( "w3bigDirective", function () {
return {
template: "<h1> Instruction </ h1>!"
};
});
</ Script>
</ Body>
try it"
You can call instruction in the following ways:
- Element name
- Attributes
- The class name
- Note
The following by way of example can output the same result:
limited use
You can limit your instruction can only be invoked by a particular way.
Examples
By addingrestrict property and set the value only "A"
, to set the command can only be called by way of property:
app.directive ( "w3bigDirective", function ( ) {
return {
restrict: "A",
template: "<h1> Instruction </ h1>!"
};
});
try it"
restrict value may be the following:
-
E
is used as the element name -
A
use as an attribute -
C
is used as the class name -
M
as a comment
restrict default is EA
, which can be invoked by the command element and attribute names.