AngularJS 指令
AngularJS 允许您使用名为 指令 的新属性扩展 HTML。
AngularJS 有一组内置指令，可以为您的应用程序提供功能。
AngularJS 还允许您定义自己的指令。
AngularJS 指令
AngularJS 指令是带前缀 ng- 的扩展 HTML 属性。
ng-app 指令初始化 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令将 HTML 控件（输入、选择、文本区域）的值绑定到应用程序数据。
阅读我们 AngularJS 指令参考 中关于所有 AngularJS 指令的信息。
示例
<div ng-app="" ng-init="firstName='John'">
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>您输入：{{ 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">
数量：<input type="number" ng-model="quantity">
成本： <input type="number" ng-model="price">
美元总计：{{ 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 控件（输入、选择、文本区域）的值绑定到应用程序数据。
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>由指令创建！</h1>"
};
});
</script>
</body>
亲自试一试 »
您可以使用以下方法调用指令
- 元素名称
- 属性
- 类
- 注释
下面的示例将产生相同的结果
限制
您可以将指令限制为仅通过某些方法调用。
示例
通过添加值为 "A" 的 restrict 属性，指令只能通过属性调用
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
restrict : "A",
template : "<h1>由指令创建！</h1>"
};
});
亲自试一试 »
合法的限制值为
E用于元素名称A用于属性C用于类M用于注释
默认值为 EA，这意味着元素名称和属性名称都可以调用指令。
