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