Home>

angularjs directive

angularjs extends html with a new attribute called a directive.

Angularjs adds functionality to your application through built-in instructions.

angularjs allows you to customize directives.

angularjs directive

The angularjs directive is an extended html attribute with the prefix ng-.

The ng-app directive initializes an angularjs application.

The ng-init instruction initializes application data.

The ng-model directive binds element values ​​(such as the value of an input field) to an application.

For complete instructions, see the angularjs reference manual.

angularjs example

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstname =" john "">
<p>try typing in the input box:</p>
<p>Name:<input type="text" ng-model="firstname"></p>
<p>What you enter is:{{firstname}}</p>
</div>
</body>
</html>

operation result:

Try typing in the input box:

Name:

You entered:john

The ng-app directive tells angularjs that the

element is the "owner" of the angularjs application.

Note:A web page can contain multiple angularjs applications running in different elements.

Data binding

The {{firstname}} expression in the above example is an angularjs data binding expression.

data binding in angularjs,Synchronized angularjs expressions with angularjs data.

{{firstname}} is synchronized via ng-model="firstname".

In the next example,The two text fields are synchronized via two ng-model directives:

angularjs example

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div data-ng-app="" data-ng-init="quantity=1;price=5">
Price calculator
Quantity:<input type="number" ng-model="quantity">
Price:<input type="number" ng-model="price">
<p><b>Total price:</b>{{quantity * price}}</p>
</div>
</body>
</html>

operation result:

Price calculator

Quantity:Price:

Total:5

Note:Using ng-init is not very common.You will learn a better way to initialize data in the controller chapter.

Duplicate html element

The ng-repeat directive repeats an html element:

angularjs example

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div data-ng-app="" data-ng-init="names=[" jani "," hege "," kai "]">
 <p>Use ng-repeat to loop through the array</p>
 <ul>
 <li data-ng-repeat="x in names">
  {{x}}
 </li>
 </ul>
</div>
</body>
</html>

Use ng-repeat to loop through an array

jani hege kai

The ng-repeat directive is used on an array of objects:

angularjs example

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="names=[
{name:"jani", country:"norway"},{name:"hege", country:"sweden"},{name:"kai", country:"denmark"}] ">
<p>Loop Object:</p>
<ul>
 <li ng-repeat="x in names">
 {{x.name + "," + x.country}}</li>
</ul>
</div>
</body>
</html>

Loop object:

jani, norway hege, sweden kai, denmark

noteangularjs perfectly supports database crud (add create, read read, update update, delete) applications.

Think of the objects in the instance as records in a database.

ng-app directive

The ng-app directive defines the root element of an angularjs application.

The ng-app instruction will automatically guide (auto-initialize) the application when the webpage is loaded.

You will learn later how ng-app connects to code modules with a value such as ng-app="mymodule".

ng-init directive

The ng-init directive defines initial values ​​for angularjs applications.

usually,Do not use ng-init. You will use a controller or module instead.

You will learn more about controllers and modules later.

ng-model directive

ng-modeldirective binds html elements to application data.

ng-modelInstructions can also:

Provide type verification (number, email, required) for application data.

Provide status for application data (invalid, dirty, touched, error).

Provide a css class for html elements.

Bind html elements to html forms.

ng-repeat directive

The ng-repeat directive clones the html element once for each item in the collection (in the array).

Create custom instructions

In addition to the angularjs built-in instructions,We can also create custom instructions.

You can use the .directive function to add custom directives.

To call a custom instruction,Custom directive names need to be added to the html element.

Use camel case to name an instruction, runoobdirective, but you need to split it with-when using it, runoob-directive:

angularjs example

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<body ng-app="myapp">
<runoob-directive></runoob-directive>
<script>
var app=angular.module ("myapp", []);
app.directive ("runoobdirective", function () {
 return {
  template:"Custom instructions!"
 };
});
</script>
</body>
</body>
</html>

operation result:

Custom instructions!

You can call instructions in the following ways:

Element name

Attributes

Class name

Comment

The following example method can also output the same result:

Element name

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<body ng-app="myapp">
<runoob-directive></runoob-directive>
<script>
var app=angular.module ("myapp", []);
app.directive ("runoobdirective", function () {
 return {
  template:"Custom instructions!"
 };
});
</script>
</body>
</body>
</html>

operation result:

Custom instructions!

Attributes:

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<body ng-app="myapp">
<div runoob-directive></div>
<script>
var app=angular.module ("myapp", []);
app.directive ("runoobdirective", function () {
 return {
  template:"Custom instructions!"
 };
});
</script>
</body>
</body>
</html>

operation result:

Custom instructions!

Class name:

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div></div>
<script>
var app=angular.module ("myapp", []);
app.directive ("runoobdirective", function () {
 return {
  restrict:"c",  template:"Custom instructions!"
 };
});
</script>
<p><strong>Note:</strong>You must set the value of<b>restrict&//b>to "c" to call the instruction by class name.
</p>
</body>
</html>

Custom instructions!

Note:You must set the restrict value to "c" in order to invoke the instruction by class name.

Notes:

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myapp">
<!-Directive:runoob-directive->
<script>
var app=angular.module ("myapp", []);
app.directive ("runoobdirective", function () {
 return {
  restrict:"m",  replace:true,  template:"Custom instructions!"
 };
});
</script>
<p><strong>Note:</strong>We need to add the<strong>replace</strong>attribute to this instance, otherwise the comment will not be visible.
</p>
<p><strong>Note:</strong>You must set the value of<b>restrict&//b>to "m" in order to call the instruction via a comment.
</p>
</body>
</html>

operation result:

Custom instructions!

Note:We need to add the replace attribute to this instance, otherwise the comments will not be visible.

Note:You must set the restrict value to "m" in order to call instructions via comments.

limited use

You can restrict your instructions to be called only in specific ways.

Examples

By adding a restrict property and setting the value to "a", the directive can only be called via the property:

Example code:

<! Doctype html>
<html><head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myapp">
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<script>
var app=angular.module ("myapp", []);
app.directive ("runoobdirective", function () {
 return {
  restrict:"a",  template:"Custom instructions!"
 };
});
</script>
<p><strong>Note:</strong>Set directives by setting<strong>restrict</strong>The attribute value is "a" to set directives that can only be called through attributes of html elements.
</p>
</body>
</html>

operation result:

Custom instructions!

Note:Setting directives by setting the restrict attribute value to "a" can only be called through the attributes of the html element.

The restrict value can be one of the following:

e for element names only

a for attribute only

c for class names only

m for comment only

The default value of restrict is ea, which means the directive can be called by element name and attribute name.

  • Previous Iframe in ASPNET Click the link on the left to display the content of the link on the right
  • Next Yii2 simple method to add verification code to the form