AngularJS 指令

AngularJS 允許您使用稱為“指令”的新屬性來擴展 HTML。

AngularJS 有一組內置指令，可為您的應用程序提供功能。

AngularJS 還允許您定義自己的指令。

AngularJS 指令

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

ng-app 指令初始化 AngularJS 應用程序。

ng-init 指令初始化應用程序數據。

ng-model 指令將 HTML 控件（input, select, textarea）的值綁定到應用程序數據。

請在我們的 AngularJS 指令參考中閱讀有關所有 AngularJS 指令的信息。

實例

<div ng-app="" ng-init="firstName='Bill'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>

親自試一試

ng-app 指令還告訴 AngularJS，<div> 元素是 AngularJS 應用程序的“所有者”。

數據綁定

上例中的 {{ firstName }} 表達式是一個 AngularJS 數據綁定表達式。

AngularJS 中的數據綁定將 AngularJS 表達式與 AngularJS 數據進行綁定。

{{ firstName }} 與 ng-model="firstName" 綁定在一起。

在下一個例子中，兩個文本字段通過兩個 ng-model 指令綁定在一起：

實例

<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>

親自試一試

使用 ng-init 并不常見。你將在關于控制器的章節中學習如何初始化數據。

重復 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>

親自試一試

您可以使用以下方式調用指令：

  • 元素名
  • 屬性
  • 類
  • 注釋

下面的例子都將產生相同的結果：

元素名

<w3-test-directive></w3-test-directive>

親自試一試

屬性

<div w3-test-directive></div>

親自試一試

類

<div class="w3-test-directive"></div>

親自試一試

注釋

<!-- directive: w3-test-directive -->

親自試一試

限制

你可以限制你的指令只能通過某些方法來調用。

實例

通過添加一個值為 "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，這意味著元素名稱和屬性名稱都可以調用指令。