JavaScript强化教程——AngularJS 指令

本文为H5EDU机构官方HTML5培训

AngularJS通过被称为指令的新属性来扩展HTML。

AngularJS通过内置的指令来为应用添加功能。

AngularJS允许你自定义指令。

AngularJS指令

AngularJS指令是扩展的HTML属性，带有前缀ng-。

ng-app指令初始化一个AngularJS应用程序。

ng-init指令初始化应用程序数据。

ng-model指令把元素值（比如输入域的值）绑定到应用程序。

完整的指令内容可以参阅AngularJS参考手册。

AngularJS实例

<divng-app=""ng-init="firstName='John'">

<p>在输入框中尝试输入：</p>

<p>姓名：<inputtype="text"ng-model="firstName"></p>

<p>你输入的为：{{firstName}}</p>

</div>

教程，主要介绍：JavaScript强化教程——AngularJS指令

ng-app指令告诉AngularJS，<div>元素是AngularJS应用程序的"所有者"。

Note一个网页可以包含多个运行在不同元素中的AngularJS应用程序。

数据绑定

上面实例中的{{firstName}}表达式是一个AngularJS数据绑定表达式。

AngularJS中的数据绑定，同步了AngularJS表达式与AngularJS数据。

{{firstName}}是通过ng-model="firstName"进行同步。

在下一个实例中，两个文本域是通过两个ng-model指令同步的：

AngularJS实例

<divng-app=""ng-init="quantity=1;price=5">

<h2>价格计算器</h2>

数量：<inputtype="number"ng-model="quantity">

价格：<inputtype="number"ng-model="price">

<p><b>总价：</b>{{quantity*price}}</p>

</div>