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>

<Metacharset="UTF-8">

<scripttype="text/javascript" src="../vendor/angular.js"></script>

<scripttype="text/javascript" src="../controllers/hello.js"></script>

</head>

AngularJS常用内置指令

</h1>

<tr>

<tdwidth="25%" align="right">链接：</td>

<tdwidth="75%">

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

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

</td>

</tr>

<tr>

<tdalign="right">图片：</td>

<tdvalign="center">

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

<imgstyle="float: left;" width="64px" height="64px" src="{{imgSrc1}}">

<divstyle="height: 64px;vertical-align: middle;line-height: 64px;float:left">，没问题的：</div>

<imgwidth="64px" height="64px" ng-src="{{imgSrc2}}">

</td>

</tr>

<tr>

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

<td>

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

</td>

</tr>

<tr>

<tdalign="right">只读</td>

</tr>

<tr>

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

<td><inputtype="checkBox"

value="再点我一下"

ng-init="checkBox1Value=true"

ng-model="checkBox1Value"

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

</tr>

<tr>

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

<td>

<selectng-readonly="true" ng-disabled="true">

<optionng-selected="isSelectedSecond" >橘子</option>

</select>

</td>

</tr>

<tr>

<tdalign="right">包含网页：</td>

<td>

<divng-include="include.html" ng-controller="IncludeController" ng-init="name='李婷'">

你好,{{name}}

</div>

</td>

</tr>

<tr>

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

<td>

<inputtype="text" ng-model="person1.name" style="float: left;"/>

<divng-switch on="person1.name" style="float: left;">

<spanng-switch-default>胜利者是：</span>

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

</div>

</td>

</tr>

<tr>

<tdalign="right">ng-if：</td>

<td>

<buttonstyle="float:left" ng-click="onNgif1Clicked()">增加</button>

<spanstyle="float:left">{{ngif1}}</span>

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

</td>

</tr>

<tr>

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

<td>

<tablewidth="80%" border="0" cellpadding="0" cellspacing="0">

<tr>

</tr>

<trng-repeat="ng in ngrepeat1">

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

<tdalign="center">{{ng}}</td>

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

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

<tdalign="center">{{$last}}</td>

<tdalign="center">{{$even}}</td>

<tdalign="center">{{$odd}}</td>

</tr>

</table>

</td>

</tr>

<tr>

<tdalign="right">ng-init：</td>

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

</tr>

<tr>

<tdalign="right">ng-bind：</td>

</tr>

<tr>

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

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

</tr>

<tr>

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

</tr>

<tr>

<tdalign="right">ng-show/ng-hide：</td>

<td>

<spanng-show="ngshow1">你好</span><button ng-click="onNgshow1Clicked()" style="width:80px;height: 30px;">切换</button>

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

</td>

</tr>

<tr>

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

<selectng-model="options1"

ng-options="options1.namefor options1 in ngoptions1">

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

</select>

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

</div></td>

</tr>

<tr>

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

<td>

<table>

<svgwidth="300" height="100" version="1.1" >

<circlecx="{{ngstuff1}}" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

</svg>

</td><td>

<svgwidth="300" height="100" version="1.1" >

<circleng-attr-cx="{{ngstuff1}}" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

</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.常用内置指令

相关文章