AngularJS Directives
AngularJS 允許您透過稱為指令的新屬性來擴充套件 HTML。
AngularJS 包含一組內建指令，可為您的應用程式提供功能。
AngularJS 還允許您定義自己的指令。
AngularJS Directives
AngularJS 指令是帶有 ng- 字首的擴充套件 HTML 屬性。
ng-app 指令初始化一個 AngularJS 應用程式。
ng-init 指令初始化應用程式資料。
ng-model 指令將 HTML 控制元件（input, select, textarea）的值繫結到應用程式資料。
在我們的 AngularJS 指令參考中閱讀有關所有 AngularJS 指令的資訊。
示例
<div ng-app="" ng-init="firstName='John'">
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>您輸入的是: {{ firstName }}</p>
</div>
自己動手試一試 »
ng-app 指令還將 div 元素指定為 AngularJS 應用程式的“所有者”。
資料繫結
上面示例中的 {{ firstName }} 表示式是 AngularJS 資料繫結表示式。
AngularJS 中的資料繫結將 AngularJS 表示式與 AngularJS 資料繫結在一起。
{{ firstName }} 與 ng-model="firstName" 繫結。
在下一個示例中，兩個文字欄位透過兩個 ng-model 指令相互繫結
示例
<div ng-app="" ng-init="quantity=1;price=5">
數量: <input type="number" ng-model="quantity">
價格: <input type="number" ng-model="price">
總價（美元）: {{ quantity * price }}
</div>
自己動手試一試 »
使用 ng-init 並不常見。您將在關於控制器（controller）的章節中學習如何初始化資料。
重複 HTML 元素
ng-repeat 指令重複一個 HTML 元素
示例
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
自己動手試一試 »
ng-repeat 指令實際上會為集合中的每個專案克隆 HTML 元素一次。
ng-repeat 指令用於物件陣列
示例
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
自己動手試一試 »
AngularJS 非常適合資料庫 CRUD（建立、讀取、更新、刪除）應用程式。
想象一下，如果這些物件是從資料庫中讀取的記錄。
ng-app 指令
ng-app 指令定義了 AngularJS 應用程式的根元素。
當網頁載入時，ng-app 指令將自動引導（自動初始化）應用程式。
ng-init 指令
ng-init 指令為 AngularJS 應用程式定義初始值。
通常，您不會使用 ng-init。您將改用控制器或模組。
您將在後面的章節中瞭解更多關於控制器和模組的資訊。
ng-model 指令
ng-model 指令將 HTML 控制元件（input, select, textarea）的值繫結到應用程式資料。
ng-model 指令還可以
- 為應用程式資料提供型別驗證（數字、電子郵件、必填）。
- 為應用程式資料提供狀態（無效、髒、已觸及、錯誤）。
- 為 HTML 元素提供 CSS 類。
- 將 HTML 元素繫結到 HTML 表單。
在下一章中閱讀有關 ng-model 指令的更多資訊。
建立新指令
除了所有內建的 AngularJS 指令之外，您還可以建立自己的指令。
使用 .directive 函式建立新指令。
要呼叫新指令，請建立一個與新指令同名的 HTML 元素。
命名指令時，必須使用駝峰式命名法，例如 w3TestDirective，但呼叫時必須使用 - 分隔的名稱，例如 w3-test-directive
示例
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
自己動手試一試 »
您可以透過以下方式呼叫指令
- 元素名稱
- Attribute
- 類
- 註釋
下面的示例都將產生相同的結果
限制
您可以限制您的指令只能透過某些方法呼叫。
示例
透過新增一個值為 "A" 的 restrict 屬性，該指令只能透過屬性呼叫
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
自己動手試一試 »
合法的 restrict 值是
E表示元素名稱A表示屬性C表示類M表示註釋
預設值為 EA，這意味著元素名稱和屬性名稱都可以呼叫該指令。
