AngularJS 指令詳細(xì)介紹

更新時(shí)間：2016年07月27日 10:16:14 投稿：lqh

本文主要介紹AngularJS 指令,這里詳細(xì)介紹AngularJS 指令知識(shí)并提供實(shí)例代碼,有需要的小伙伴可以參考下

AngularJS 指令

AngularJS 通過(guò)被稱為指令的新屬性來(lái)擴(kuò)展 HTML。

AngularJS 通過(guò)內(nèi)置的指令來(lái)為應(yīng)用添加功能。

AngularJS 允許你自定義指令。

AngularJS 指令

AngularJS 指令是擴(kuò)展的 HTML 屬性，帶有前綴 ng-。

ng-app 指令初始化一個(gè) AngularJS 應(yīng)用程序。

ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。

ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。

完整的指令內(nèi)容可以參閱 AngularJS 參考手冊(cè)。

AngularJS 實(shí)例

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

運(yùn)行結(jié)果：

在輸入框中嘗試輸入:

姓名:

你輸入的為: John

ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應(yīng)用程序的"所有者"。

注意：一個(gè)網(wǎng)頁(yè)可以包含多個(gè)運(yùn)行在不同元素中的 AngularJS 應(yīng)用程序。

數(shù)據(jù)綁定

上面實(shí)例中的 {{ firstName }} 表達(dá)式是一個(gè) AngularJS 數(shù)據(jù)綁定表達(dá)式。

AngularJS 中的數(shù)據(jù)綁定，同步了 AngularJS 表達(dá)式與 AngularJS 數(shù)據(jù)。

{{ firstName }} 是通過(guò) ng-model="firstName" 進(jìn)行同步。

在下一個(gè)實(shí)例中，兩個(gè)文本域是通過(guò)兩個(gè) ng-model 指令同步的：

AngularJS 實(shí)例

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

價(jià)格計(jì)算器 

數(shù)量: <input type="number" ng-model="quantity">
價(jià)格: <input type="number" ng-model="price">

<p><b>總價(jià):</b> {{quantity * price}}</p>

</div>

</body>
</html>

運(yùn)行結(jié)果：

價(jià)格計(jì)算器

數(shù)量: 價(jià)格:

總價(jià): 5

注意：使用 ng-init 不是很常見(jiàn)。您將在控制器一章中學(xué)習(xí)到一個(gè)更好的初始化數(shù)據(jù)的方式。

重復(fù) HTML 元素

ng-repeat 指令會(huì)重復(fù)一個(gè) HTML 元素：

AngularJS 實(shí)例

<!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 來(lái)循環(huán)數(shù)組</p>
 <ul>
 <li data-ng-repeat="x in names">
  {{ x }}
 </li>
 </ul>
</div>

</body>
</html>

使用 ng- repeat 來(lái)循環(huán)數(shù)組

Jani
Hege
Kai

ng-repeat 指令用在一個(gè)對(duì)象數(shù)組上：

AngularJS 實(shí)例

<!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>循環(huán)對(duì)象:</p>
<ul>
 <li ng-repeat="x in names">
 {{ x.name + ', ' + x.country }}</li>
</ul>

</div>

</body>
</html>

循環(huán)對(duì)象：

Jani, Norway
Hege, Sweden
Kai, Denmark

Note AngularJS 完美支持?jǐn)?shù)據(jù)庫(kù)的 CRUD（增加Create、讀取Read、更新Update、刪除Delete）應(yīng)用程序。

把實(shí)例中的對(duì)象想象成數(shù)據(jù)庫(kù)中的記錄。

ng-app 指令

ng-app 指令定義了 AngularJS 應(yīng)用程序的根元素。

ng-app 指令在網(wǎng)頁(yè)加載完畢時(shí)會(huì)自動(dòng)引導(dǎo)（自動(dòng)初始化）應(yīng)用程序。

稍后您將學(xué)習(xí)到 ng-app 如何通過(guò)一個(gè)值（比如 ng-app="myModule"）連接到代碼模塊。

ng-init 指令

ng-init 指令為 AngularJS 應(yīng)用程序定義了初始值。

通常情況下，不使用 ng-init。您將使用一個(gè)控制器或模塊來(lái)代替它。

稍后您將學(xué)習(xí)更多有關(guān)控制器和模塊的知識(shí)。

ng-model 指令

ng-model 指令綁定 HTML 元素到應(yīng)用程序數(shù)據(jù)。

ng-model 指令也可以：

為應(yīng)用程序數(shù)據(jù)提供類型驗(yàn)證（number、email、required）。

為應(yīng)用程序數(shù)據(jù)提供狀態(tài)（invalid、dirty、touched、error）。

為 HTML 元素提供 CSS 類。

綁定 HTML 元素到 HTML 表單。

ng-repeat 指令

ng-repeat 指令對(duì)于集合中（數(shù)組中）的每個(gè)項(xiàng)會(huì) 克隆一次 HTML 元素。

創(chuàng)建自定義的指令

除了 AngularJS 內(nèi)置的指令外，我們還可以創(chuàng)建自定義指令。

你可以使用 .directive 函數(shù)來(lái)添加自定義的指令。

要調(diào)用自定義指令，HTML 元素上需要添加自定義指令名。

使用駝峰法來(lái)命名一個(gè)指令， runoobDirective, 但在使用它時(shí)需要以 - 分割, runoob-directive:

AngularJS 實(shí)例

<!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 : "自定義指令!"
 };
});
</script>

</body>

</body>
</html>

運(yùn)行結(jié)果：

自定義指令!

你可以通過(guò)以下方式來(lái)調(diào)用指令：

元素名
屬性
類名
注釋

以下實(shí)例方式也能輸出同樣結(jié)果:

元素名

<!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 : "自定義指令!"
 };
});
</script>

</body>

</body>
</html>

運(yùn)行結(jié)果：

自定義指令!

屬性：

<!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 : "自定義指令!"
 };
});
</script>

</body>

</body>
</html>

運(yùn)行結(jié)果：

自定義指令!

類名：

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

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

<p><strong>注意：</strong> 你必須設(shè)置 <b>restrict</b> 的值為 "C" 才能通過(guò)類名來(lái)調(diào)用指令。</p>

</body>
</html>

自定義指令!

注意：你必須設(shè)置 restrict 的值為 "C" 才能通過(guò)類名來(lái)調(diào)用指令。

注釋：

<!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 : "自定義指令!"
 };
});
</script>

<p><strong>注意：</strong> 我們需要在該實(shí)例添加 <strong>replace</strong> 屬性， 否則評(píng)論是不可見(jiàn)的。</p>

<p><strong>注意：</strong> 你必須設(shè)置 <b>restrict</b> 的值為 "M" 才能通過(guò)注釋來(lái)調(diào)用指令。</p>

</body>
</html>

運(yùn)行結(jié)果：

自定義指令!

注意：我們需要在該實(shí)例添加 replace 屬性，否則評(píng)論是不可見(jiàn)的。

注意：你必須設(shè)置 restrict 的值為 "M" 才能通過(guò)注釋來(lái)調(diào)用指令。

限制使用

你可以限制你的指令只能通過(guò)特定的方式來(lái)調(diào)用。

實(shí)例

通過(guò)添加 restrict 屬性,并設(shè)置只值為 "A", 來(lái)設(shè)置指令只能通過(guò)屬性的方式來(lái)調(diào)用:

實(shí)例代碼：

<!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 : "自定義指令!"
 };
});
</script>

<p><strong>注意：</strong> 通過(guò)設(shè)置 <strong>restrict</strong> 屬性值為 "A" 來(lái)設(shè)置指令只能通過(guò) HTML 元素的屬性來(lái)調(diào)用。</p>

</body>
</html>

運(yùn)行結(jié)果：

自定義指令!

注意：通過(guò)設(shè)置 restrict 屬性值為 "A" 來(lái)設(shè)置指令只能通過(guò) HTML 元素的屬性來(lái)調(diào)用。

restrict 值可以是以下幾種:

E 只限元素名使用
A 只限屬性使用
C 只限類名使用
M 只限注釋使用

restrict 默認(rèn)值為 EA, 即可以通過(guò)元素名和屬性名來(lái)調(diào)用指令。

以上就是對(duì)AngularJS 指令資料整理，后續(xù)繼續(xù)補(bǔ)充

您可能感興趣的文章: