Angularjs系列之常用内置指令

2.4.1. 常用内置指令

常用内置指令有一些独特的性质。虽然可用表达式生成HTML代码从而与它们等效，但这些做法都是不推荐的。

ng-href

当使用当前作用域中的属性动态创建URL时，应该用ng-href代替href。Angular.js表达式可以设定大部分HTML元素的属性或者值，但单独设定锚链接的href属性是不可以的。这里的潜在问题是当用户点击一个由插值动态生成的链接时，如果插值尚未生效，将会跳转到错误的页面（通常是404）。

ng-src

与ng-href同理，AngularJS会告诉浏览器在 ng-src 对应的表达式生效之前不要加载图像，因为生效之前加载的图片是无效的。

ng-disabled

使用 ng-disabled 可以把 disabled 属性绑定到各表单输入字段上。当写普通的HTML输入字段时，如果在元素标签上出现了 disabled 属性就会禁用这个输入字段。

ng-checked

标准的 checked 属性是一个布尔属性，不需要进行赋值。通过 ng-checked 将某个表达式同是否出现checked属性进行绑定。要与ng-model联合使用才有效果。

ng-readonly

同其他布尔属性一样，HTML定义只会检查 readonly 属性是否出现，而不是它的实际值。通过 ng-readonly 可以将某个返回真或假的表达式同是否出现 readonly 属性进行绑定：

ng-selected

可以对是否出现 option 标签的 selected 属性进行绑定。

ng-include

加载、编译并包含外部HTML片段到当前的应用中。模板的URL被限制在与应用文档相同的域和协议下，可以通过白名单或包装成被信任的值来突破限制。更进一步，需要考虑跨域资源共享（Cross-Origin Resource Sharing，CORS）和同源规则（Same Origin Policy）来确保模板可以在任何浏览器中正常加载。例如，所有浏览器都不能进行跨域的请求，部分浏览器也不能访问file://协议的资源。

ng-switch

和 ng-switch-when 及 on="propertyName" 一起使用，可以在 propertyName 发生变化时渲染不同指令到视图中。

ng-if

根据表达式的值在DOM中生成或移除一个元素。同 no-show 和 ng-hide 指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是真正生成或移除节点。

ng-repeat

遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。$index ：遍历的进度（0... length-1 ）。$first：当元素是遍历的第一个时值为 true。$middle：当元素处于第一个和最后元素之间时值为 true$last：当元素是遍历的最后一个时值为true。$even：当 $index 值是偶数时值为 true 。$odd ：当 $index 值是奇数时值为true。

ng-init

在指令被调用时设置内部作用域的初始状态。

ng-bind

尽管可以在视图中使用 {{ }} 模板语法（AngularJS内置的方式），我们也可以通过 ng-bind指令实现同样的行为。内容会被当作子文本节点渲染到含有 ng-bind 指令的元素内。

ng-cloak

除使用 ng-bind 来避免未渲染元素闪烁，还可以在含有 {{ }} 的元素上使用 ng-cloak 指令。ng-cloak 指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。

ng-bind-template

同 ng-bind 指令类似， ng-bind-template 用来在视图中绑定多个表达式。

ng-model

将 input、select、text area 或自定义表单控件同包含它们的作用域中的属性进行绑定。它可以提供并处理表单验证功能，在元素上设置相关的CSS类（ng-valid、ng-invalid等），并负责在父表单中注册控件。

ng-show/ng-hide

根据所给表达式的值来显示或隐藏HTML元素。当赋值给 ng-show 指令的值为 false 时元素会被隐藏。类似地，当赋值给 ng-hide 指令的值为 true 时元素也会被隐藏。

ng-change

在表单输入发生变化时计算给定表达式的值。因为要处理表单输入，这个指令要和 ngModel 联合起来使用。

ng-form

在一个表单内部嵌套另一个表单。普通的HTML <form> 标签不允许嵌套，但ng-form 可以。内部所有的子表单都合法时，外部的表单才会合法。CSS类会根据表单的验证状态自动设置：表单合法时设置 ng-valid；表单不合法时设置 ng-invlid；表单未进行修改时设置 ng-pristion；表单进行过修改时设置 ng-dirty。

Angular不会将表单提交到服务器，除非它指定了action属性。要指定提交表单时调用哪个JavaScript方法，使用下面两个指令中的一个。ng-submit：在表单元素上使用。ng-click：在第一个按钮或submit类型（input[type=submit]）的输入字段上使用。

ng-click

指定一个元素被点击时调用的方法或表达式。

ng-select/ng-options

将数据同HTML的 <select> 元素进行绑定。这个指令可以和 ng-model 以及ng-options 指令一同使用，ng-options 的值可以是一个内涵表达式（comprehension expression），它可以接受一个数组或对象，并对它们进行循环，将内部的内容提供给select 标签内部的选项。数组作为数据源：用数组中的值做标签；用数组中的值作为选中的标签；用数组中的值做标签组；用数组中的值作为选中的标签组。对象作为数据源：用对象的键值（key-value）做标签；用对象的键值作为选中的标签；用对象的键值作为标签组；用对象的键值作为选中的标签组。

ng-class

style内不能使用angularjs表达式。使用 ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。ng-class-even和ng-class-odd是AngularJS内置支持奇偶行不同外观的样式，内置CSS样式名是.even和.odd。代码范式：

ng-class="{CSS样式名:关系表达式,...}"

注意只有一个尖括号，不能不写尖括号，也不能写两个尖括号。

ng-style

把键值符合层叠样式表的对象赋给style。

ng-submit

将表达式同 onsubmit 事件进行绑定。这个指令同时会阻止默认行为（发送请求并重新加载页面），除非表单不含有 action 属性。

ng-attr-(suffix)

当AngularJS编译DOM时会查找花括号 {{ some expression }} 内的表达式。这些表达式会被自动注册到 $watch 服务中并更新到 $digest 循环中，成为它的一部分。有时浏览器会对属性会进行很苛刻的限制。SVG就是一个例子。

<svg>

</svg>

运行上面的代码会抛出一个错误，指出我们有一个非法属性。可以用 ng-attr-cx 来解决这个问题。注意， cx 位于这个名称的尾部。在这个属性中，通过用 {{ }} 来写表达式，达到前面提到的目的。

<svg>

</svg>

示例工程：T91。

HTML代码：

<!DOCTYPE html>

</head>

AngularJS常用内置指令

</h1>

<tr>

当锚链接的链接指向的是作用域的变量时，错误的用法：<a href="{{href1}}">我的博客</a></li>。

正确的用法：<a ng-href="{{href2}}">我的博客</a>

</td>

</tr>

<tr>

<div style="height: 64px;vertical-align: middle;line-height: 64px;float:left">这个后台报错：</div>

</td>

</tr>

<tr>

<td align="right">启用与禁用：</td>

<td>

<button style="width:80px;height: 30px;" ng-click="onButton1Clicked(this)" ng-disabled="isButton1Disabled">{{button1Tip}}</button>

</td>

</tr>

<tr>

</tr>

<tr>

<td align="right">复选框的值：</td>

<td><input type="checkbox"

value="再点我一下"

ng-init="checkbox1Value=true"

ng-model="checkbox1Value"

ng-checked="checkbox1Value"></td>

</tr>

<tr>

<td align="right">下拉列表框：</td>

<td>

</select>

</td>

</tr>

<tr>

<td>

你好,{{name}}

</div>

</td>

</tr>

<tr>

<td align="right">ng-switch：</td>

<td>

<span ng-switch-when="李婷">{{ person1.name }}</span>

</div>

</td>

</tr>

<tr>

<td>

<div ng-if="ngif1%2==0" style="float:left;color:blue">当数字是偶数的时候你才看得见我。</div>

</td>

</tr>

<tr>

<td align="right">ng-repeat：</td>

<td>

<tr>

</tr>

<td align="center">{{$index}}</td>

<td align="center">{{$first}}</td>

<td align="center">{{$middle}}</td>

</tr>

</table>

</td>

</tr>

<tr>

<td><p ng-init="nginit1='你好，我在HTML中初始化的'">{{nginit1}}</p></td>

</tr>

<tr>

</tr>

<tr>

<td align="right">ng-cloak：</td>

<td><p ng-cloak>{{ngcloak1}}</p></td>

</tr>

<tr>

<td align="right">ng-bind-template：</td>

</tr>

<tr>

<td>

<span ng-hide="nghide1">ng-show和ng-hide</span><button ng-click="onNghide1Clicked()" style="width:80px;height: 30px;">显隐</button>

</td>

</tr>

<tr>

<td align="right">ng-options1：</td>

<select ng-model="options1"

ng-options="options1.name for options1 in ngoptions1">

<option value="">选择一个城市</option>

</select>

你最喜欢的城市: {{ options1.name }}

</div></td>

</tr>

<tr>

<td align="right">ng-attr-(stuff)：</td>

<td>

<table>

</svg>

</td><td>

</svg>

</td></tr>

</table>

</td>

</tr>

</table>

</body>

</html>

JS代码：

var module=angular.module("myApp",[]);

module.controller("HelloController",function($scope,$timeout){

$scope.button1Tip="点我试试";

$scope.isButton1Disabled=false;

$scope.isTextarea1Readonly=false;

$scope.checkbox1Value=false;

$scope.isSelectedSecond=false;

$scope.person1={

name:""

};

$scope.ngif1=1;

$scope.onButton1Clicked=function(dom){

$scope.href1="http://blog.csdn.net/caoshiying?viewmode=contents";

$scope.href2=$scope.href1;

$scope.imgSrc1="../images/ghl.jpg";

$scope.imgSrc2=$scope.imgSrc1;

console.log("已设置链接。");

$scope.isButton1Disabled=true;

$scope.isTextarea1Readonly=true;

$scope.button1Tip="不理你。";

};

$scope.$watch("checkbox1Value",function(){

console.log("复选框的值："+$scope.checkbox1Value);

});

$scope.onNgif1Clicked=function(){

$scope.ngif1+=1;

};

$scope.ngrepeat1=["杏","梨","桃","橘","苹"];

$scope.ngbind1="我可以赋值为InnerHTML";

$scope.ngcloak1="我在路由调用的时候显示的。"

$scope.ngtemplate1="你好，";

$scope.ngtemplate2="世界，template bind";

$scope.ngshow1=true;

$scope.nghide1=true;

$scope.onNgshow1Clicked=function(){

$scope.ngshow1=!$scope.ngshow1;

};

$scope.onNghide1Clicked=function(){

$scope.nghide1=!$scope.nghide1;

}

$scope.ngoptions1 = [

{name: 'Seattle'},

{name: 'San Francisco'},

{name: 'Chicago'},

{name: 'New York'},

{name: 'Boston'}

];

$scope.options1={};

$scope.ngstuff1=64;

});

module.controller("IncludeController",function($scope){

$scope.hello="我是另外一个网页。有标准的HTML头。";

});

Angularjs系列之常用内置指令

2.4.1. 常用内置指令

猜你喜欢