AngularJS directives


AngularJS extends HTML with new attributes called Directives.

AngularJS adds functionality to your application through built-in directives.

AngularJS allows you to customize directives.

AngularJS Directives

AngularJS directives are extended HTML attributes prefixed with ng-. The

ng-app directive initializes an AngularJS application.

ng-init directive initializes application data.

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

For complete instruction content, please refer to the AngularJS Reference Manual.

Instance

<!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>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>

</div>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

The

ng-app directive tells AngularJS that the <div> element is the "owner" of the AngularJS application.

NoteA web page can contain multiple AngularJS applications running in different elements.

Data binding

{{ firstName }} expression in the above example is an AngularJS Data binding expression.

Data binding in AngularJS synchronizes AngularJS expressions and AngularJS data.

{{ firstName }} is synchronized through ng-model="firstName".

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

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">

<h2>价格计算器</h2>

数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">

<p><b>总价:</b> {{quantity * price}}</p>

</div>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

NoteUseng-init Not very common. You'll learn a better way to initialize data in the Controllers chapter.

Repeat HTML element

ng-repeat The directive will repeat an HTML element:

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>使用 ng-repeat 来循环数组</p>
  <ul>
    <li data-ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

ng-repeat The instruction is used on an object array ：

Instance

<!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>循环对象:</p>
<ul>
  <li ng-repeat="x in names">
  {{ x.name + ', ' + x.country }}</li>
</ul>

</div>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

NoteAngularJS perfectly supports database CRUD (add Create, read Read, update Update, delete Delete) applications.
Think of the objects in the instance as records in the database.

ng-app directive

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

ng-app command will automatically boot (automatically initialize) the application when the web page is loaded.

You will learn later ng-app how to connect to a code module through a value (such as ng-app="myModule").

ng-init directive

ng-init directive defines the initial value for an AngularJS application.

Normally, ng-init is not used. You will use a controller or module in its place.

You will learn more about controllers and modules later.

ng-model Directive

ng-model Directive Binds HTML elements to application data.

ng-model The directive can also:

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

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

  • Provides CSS classes for HTML elements.

  • Bind HTML elements to HTML forms.

ng-repeat directive

ng-repeat The directive will for each item in the collection (array) Clone the HTML element once.


Create custom directives

In addition to AngularJS’s built-in directives, we can also create custom directives.

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

To call a custom instruction, the custom instruction name needs to be added to the HTML element.

Use camel case to name a directive, phpDirective, but when using it, you need to split it with -, php-directive:

Instance

<!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">

<php-directive></php-directive>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

You can call the directive in the following ways:

  • Element name

  • Attribute

  • Class Name

  • Comments

The following example methods can also output the same result:

Element name

Instance

<!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">

<php-directive></php-directive>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Properties

Instance

<!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 php-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Class name

Instance

<!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 class="php-directive"></div>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "C",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Comments

Instance 

<!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: php-directive -->

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Restrictions Using

you can restrict your directives to only be called in specific ways.

Example

By adding the restrict attribute and setting the value to "A", To set the command, it can only be called through attributes:

Instance

<!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">

<php-directive></php-directive>

<div php-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 通过设置 <strong>restrict</strong> 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。</p>

</body>
</html>

Run instance»

Click "Run" Instance" button to view online examples

restrict The value can be the following:

  • E As the element name use

  • A As the attribute use

  • C As the class name use

  • M As a comment use

restrict and the default value is EA, i.e. Directives can be called via element names and attribute names.