手册
目录
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 并不常见。你将在关于控制器的章节中学习如何初始化数据。
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 指令定义 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：
<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，这意味着元素名称和属性名称都可以调用指令。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.4万人学习
共29课时
62万人学习
共25课时
39.5万人学习
共43课时
71.3万人学习
共25课时
61.9万人学习
共22课时
23.1万人学习
共28课时
34.1万人学习
共89课时
125.8万人学习
