AngularJS 指令


AngularJS 透過被稱為 指令 的新屬性來擴充 HTML。

AngularJS 透過內建的指令來為應用程式添加功能。

AngularJS 允許你自訂指令。

AngularJS 指令

AngularJS 指令是擴充的 HTML 屬性，帶有前綴 ng-。

ng-app 指令初始化一個 AngularJS 應用程式。

ng-init 指令初始化應用程式資料。

ng-model 指令把元素值（例如輸入域的值）綁定到應用程式。

完整的指令內容可以參考  AngularJS 參考手冊。

實例

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

運行實例»

點擊"運行實例" 按鈕查看線上實例

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

Note一個網頁可以包含多個運行在不同元素中的 AngularJS 應用程式。

資料綁定

上面實例中的{{ firstName }} 表達式是一個AngularJS資料綁定表達式。

AngularJS 中的資料綁定，同步了 AngularJS 表達式與 AngularJS 資料。

{{ firstName }} 是透過 ng-model="firstName" 進行同步。

在下一個實例中，兩個文字域是透過兩個ng-model 指令同步的：

實例

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

執行實例»

點擊"運行實例" 按鈕查看線上實例

Note使用ng-init 不是很常見。您將在控制器一章中學習到一個更好的初始化資料的方式。

重複HTML 元素

ng-repeat 指令會重複一個HTML 元素：

實例

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

運行實例»點擊"運行實例" 按鈕查看線上實例

#ng-repeat 指令用在一個物件數組上：

實例

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

運行實例»點擊"運行實例"按鈕查看線上實例

AngularJS 完美支援資料庫的CRUD（增加Create、讀取Read、更新Update、刪除Delete）應用程式。

ng-app 指令

ng-app 指令定義了 AngularJS 應用程式的 根元素。

ng-app 指令在網頁載入完成時會自動開機（自動初始化）應用程式。

稍後您將學習到 ng-app 如何透過一個值（例如 ng-app="myModule"）連接到程式碼模組。

ng-init 指令

ng-init 指令為 AngularJS 應用程式定義了 初始值。

通常情況下，不使用 ng-init。您將使用一個控制器或模組來代替它。

稍後您將學習更多有關控制器和模組的知識。

ng-model 指令

ng-model 指令 綁定 HTML 元素 到應用程式資料。

ng-model 指令也可以：

  • #為應用程式資料提供型別驗證（number、email、required）。

  • 為應用程式資料提供狀態（invalid、dirty、touched、error）。

  • 為 HTML 元素提供 CSS 類別。

  • 綁定 HTML 元素到 HTML 表單。

ng-repeat 指令

ng-repeat 指令對於集合中（數組中）的每個項目會複製一次HTML 元素。


建立自訂的指令

除了 AngularJS 內建的指令外，我們還可以建立自訂指令。

你可以使用 .directive 函數來新增自訂的指令。

要呼叫自訂指令，HTML 元素上需要新增自訂指令名。

使用駝峰法來命名一個指令， phpDirective, 但在使用它時需要以- 分割, php-directive:

實例

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

運行實例»

點擊"運行實例" 按鈕查看線上實例

你可以透過以下方式來呼叫指令：

  • 元素名稱

  • #屬性

  • 類名

  • 註解

以下實例方式也能輸出同樣結果:

元素名稱

實例

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

運行實例»

#點擊"運行實例" 按鈕查看線上實例

屬性

實例

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

#運行實例»

點擊"運行實例" 按鈕查看線上實例

類別名稱

實例

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

運行實例»

點擊"運行實例"按鈕查看線上實例

#註解

實例

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

運行實例»

點擊"運行實例"按鈕查看線上實例

限制使用

你可以限制你的指令只能用特定的方式來呼叫。

實例

透過新增 restrict 屬性,並設定只值為 "A", 來設定指令只能透過屬性的方式來呼叫:

實例

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

##運行實例»#點擊"運行實例" 按鈕查看線上實例

restrict 值可以是以下幾種:

  • E作為元素名稱使用

  • A 作為屬性使用

  • #C 作為類別名稱使用

  • M 作為註解使用

#restrict 預設值為EA, 即可以透過元素名和屬性名來呼叫指令。

←
→

PHP中文網

首頁首頁課程課程文章文章問答問答詞典詞典手册手册下載下載搜尋搜尋APP下載 APP下載
Note把實例中的物件想像成資料庫中的記錄。