手册
目录
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令将 HTML 控件（input, select, textarea）的值绑定到应用程序数据。
请在我们的 AngularJS 指令参考中阅读有关所有 AngularJS 指令的信息。
运行实例 »Name:
You wrote: {{ firstName }}
点击 "运行实例" 按钮查看在线实例
ng-app 指令还告诉 AngularJS，
上例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定将 AngularJS 表达式与 AngularJS 数据进行绑定。
{{ firstName }} 与 ng-model="firstName" 绑定在一起。
在下一个例子中，两个文本字段通过两个 ng-model 指令绑定在一起：
运行实例 »Quantity: Costs: Total in dollar: {{ quantity * price }}
点击 "运行实例" 按钮查看在线实例
使用 ng-init 并不常见。你将在关于控制器的章节中学习如何初始化数据。
ng-repeat 指令重复 HTML 元素：
运行实例 »
- {{ x }}
点击 "运行实例" 按钮查看在线实例
ng-repeat 指令实际上为集合中的每个项目克隆一次 HTML 元素。
用于对象数组的 ng-repeat 指令：
运行实例 »
- {{ x.name + ', ' + x.country }}
点击 "运行实例" 按钮查看在线实例
AngularJS 非常适合数据库 CRUD（创建、读取、更新、删除）应用程序。
想象一下，如果这些对象是来自数据库的记录。
ng-app 指令定义 AngularJS 应用程序的根元素。
当加载网页时，ng-app 指令将自动引导（自动初始化）应用程序。
ng-init 指令定义 AngularJS 应用程序的初始值。
通常，您不会使用 ng-init。您将改用控制器或模块。
稍后您将了解有关控制器和模块的更多信息。
ng-model 指令将 HTML 控件（input, select, textarea）的值绑定到应用程序数据。
ng-model 指令还可以：
在下一章中阅读更多关于 ng-model 指令的信息。
除了所有内置的 AngularJS 指令之外，您还可以创建自己的指令。
新指令是通过使用 .directive 函数创建的。
要调用新指令，请创建一个与新指令具有相同标记名称的 HTML 元素。
命名指令时，必须使用驼峰式命名，w3TestDirective，但调用它时，必须使用 - 分隔的名称，w3-test-directive：
运行实例 »
点击 "运行实例" 按钮查看在线实例
您可以使用以下方式调用指令：
下面的例子都将产生相同的结果：
运行实例 »
点击 "运行实例" 按钮查看在线实例
运行实例 »
点击 "运行实例" 按钮查看在线实例
运行实例 »
点击 "运行实例" 按钮查看在线实例
运行实例 »
点击 "运行实例" 按钮查看在线实例
你可以限制你的指令只能通过某些方法来调用。
通过添加一个值为 "A" 的 restrict 属性，该指令只能通过属性来调用：
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
restrict : "A",
template : "Made by a directive!
"
};
});
运行实例 »点击 "运行实例" 按钮查看在线实例
合法的 restrict 值为：
E 表示元素名A 表示属性C 表示类M 表示注释默认情况下，该值为 EA，这意味着元素名称和属性名称都可以调用指令。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
71万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
