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