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，这意味着元素名称和属性名称都可以调用指令。