一、引用指令
在AngularJS的文档中,所有指令的名字以驼峰命名法。而在模板中,则需要以蛇形命名法。可以以冒号分割(ng:model)或下划线分割(ng_model),更常见的是以ng-model这种样式命名。如果是HTML5,前面可以加上data,如data-ng-model。
二、插值指令
用花括号界定的表达式,如:
<span>{{expression}}</span>
插值指令会对模型中的任意HTML内容进行转义,这是为了防止注入攻击。例如:
$scope.msg='Hello,<b>World</b>!';
<p>{{msg}}</p>
渲染后会对模型中的任意HTML内容进行转义,最后结果为:
<p>Hello,<b>World</b>!</p>
如果因为某些理由,包含HTML标记的模型要被浏览器求值和渲染,那么可以用ng-bind-html-unsafe指令来默认关掉默认的HTML标签转义:
<p ng-bind-html-unsafe="msg"></p>
AngularJS还有一个指令----ng-bind-html,它能选择性的净化指定的HTML标签,同时允许其他标签被浏览器解释。他的用法如下:
<p ng-bind-html="msg"></p>
需要引用额外的源文件:angular-sanitize.js,还需要声明ngSanitize模块依赖。
三、条件化显示
四套指令集:ng-show/ng-hide,ng-switch-*,ng-if,ng-include
3.1 ng-show/ng-hide指令通过简单的应用style="display:none"来隐藏DOM元素,这些元素并不从DOM树种移除。
3.2 ng-switch和ng-if可以增加、移除DOM元素,ng-if使用更简单一点。
3.3 ng-include可以根据表达式的求值结果,有条件的加载和显示子模板。如:
<div ng-include="user.admin&&'edit.admin.html'||'edit.user.html'"></div>
这句话的意思是,如果user.admin为true,则返回的结果为edit.admin.html,第二个表达式edit.user.html就不会执行。最后的返回结果为edit.admin.html。如果user.admin为false,则第二句话就不会执行,则第一句和第二句整个就是false,返回结果就为第三句话,返回edit.user.html.
tips:&&第一个表达式为假就不会处理第二个表达式,||相反。
四、ngRepeat指令
<table class="table">
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
</table>
4.1 特殊变量
AngularJS重复器在为每个独立条目创建作用域时,都会申明一组特殊变量,他们可用于确定此元素在集合中的位置。
$index:指代元素在集合中的索引数字(从0开始)。
$first、$middle、$last:这些变量会根据元素的位置获得对应的布尔值。