AngularJS 常用指令

AngularJS 指令

AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得HTML可以转变成“特定领域语言(DSL)”，是用来扩展浏览器能力的技术之一，在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行，这使得指令可以为DOM指定行为，或者改变它。

AngularJS指令带有前缀ng-，我们也可以称之为“指令属性”，它就是绑定在DOM元素上的函数，可以调用方法、定义行为、绑定controller及$scope对象、操作DOM，等等。

当浏览器启动、开始解析HTML时，DOM元素上的指令属性就会跟其他属性一样被解析，也就是说当一个Angular.js应用启动，Angular编译器就会遍历DOM树来解析HTML，寻找这些指令属性函数，在一个DOM元素上找到一个或多个这样的指令属性函数，它们就会被收集起来、排序，然后按照优先级顺序被执行。

ng-app

ng-app定义一个AngularJS应用程序,它是应用程序的起点，会自动初始化AngularJS框架。AngularJS在加载整个文档后找到文档中拥有ng-app指令的元素，编译该元素及其子元素。

1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
6</head>
7<body ng-app="myApp">
8    <script>
9        var app = angular.module('myApp', []);
10    </script>
11</body>
12</html>
13

该元素的父元素或兄弟元素不会被编译。
在当个HTML中只允许存在一个ng-app指令
我们也可以不定义ng-app 指令，手动初始化AngularJS

// 指定document元素，调用angular.bootstrap 函数，手动初始化AngularJS angular.element(document).ready(function () { angular.bootstrap(document); });

ng-init

ng-init指令初始化应用程序数据，也就是为AngularJS应用程序定义初始值，通常情况下，我们会使用一个控制器或模块来代替它。

1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
6</head>
7<body ng-app ng-init="msg='hello world!';name='chenjy';age='16'">
8	<div>
9		name:<span>{{name}}</span>,
10		age:<span>{{age}}</span>
11	</div>
12</body>
13</html>
14

ng-model

ng-model指令用于AngularJS中的双向数据绑定。它将<input>，<select>或<textarea>元素绑定到$ scope对象上的指定属性。因此，元素的值将是属性的值，反之亦然。

1<!DOCTYPE html>
2<html >
3<head>
4<meta charset="utf-8">
5<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
6</head>
7<body ng-app>
8	your name：<input type="text" ng-model="name"/>,
9	your name：{{name}}
10</body>
11</html>
12

ng-bind

ng-bind将应用程序数据绑定到元素上。如果数据的值发生改变，会更新元素。

1<!DOCTYPE html>
2<html >
3<head>
4<meta charset="utf-8">
5<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
6</head>
7<body ng-app>
8	your name：<input type="text" ng-model="name">,
9	your name：<span ng-bind="name"></span>
10</body>
11</html>
12

ng-bind和表达式{{}}很像，但是ng-bind是在angularJS解析渲染完毕后才将数据显示出来的。对于首个页面中的数据绑定操作，建议采用ng-bind，以避免其未被渲染的模板被用户看到。

ng-repeat

ng-repeat对指定数组集合中的每一项都重复一次HTML。

1<!DOCTYPE html>
2<html >
3<head>
4<meta charset="utf-8">
5<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
6</head>
7<body ng-app ng-init="namesList=['chenjy','tom','jerry']">
8	<ul>
9		<li ng-repeat="name in namesList">
10	            {{name}}
11	        </li>
12    </ul>    
13</body>
14</html>
15
16

如果我们把namesList=['chenjy','tom','jerry']改成namesList=['chenjy','chenjy','jerry']

你会发现报错了！

Error: ngRepeat:dupes Duplicate Key in Repeater

dupes

ng-repeat 不允许collection中存在两个相同Id的对象，对于数字或者字符串等基本数据类型它的id就是本身的值。因此，数组是不允许存在两个相同的数字。需要自己定义track by 表达式。
<li ng-repeat="name in namesList track by $index"> {{name}} </li>

ng-click

AngularJS提供的点击事件指令，对于按钮、链接等可以通过ng-click实现点击事件绑定。

1<!DOCTYPE html>
2<html >
3<head>
4<meta charset="utf-8">
5<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
6</head>
7<body ng-app ng-init="age=16">
8	age:<span ng-bind ="age"></span>
9	    <button ng-click="age=age+1">Change age</button>
10</body>
11</html>
12

ng-show和ng-if

ng-show和ng-if都可以用一个表达式来控制是否显示元素。

不同的是 ng-show 当表达式为false的时候只是给对应的元素添加了一个ng-hide的class隐藏元素。

ng-if如果值为false则会在渲染的过程中不加载元素。

1<!DOCTYPE html>
2<html >
3<head>
4<meta charset="utf-8">
5<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
6</head>
7<body ng-app ng-init="isTom=false;isJerry=false">
8	<span ng-if ="isTom">Tom</span>
9	<button ng-click="isTom=!isTom">Change</button>
10	<br />
11	<span ng-show ="isJerry">Jerry</span>
12	<button ng-click="isJerry=!isJerry">Change</button>
13</body>
14</html>
15

ng-if 包含的元素都拥有自己的作用域。相对于控制器作用域来说，这个作用域属于一个子级作用域。如果想用ng-model绑定控制器的变量值，必须添加$parent标识
<!DOCTYPE html> <html ng-app ="myApp"> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-controller="myCtrl"> <div ng-if ="isTom"> <input ng-model="$parent.tomAge"/> </div>
```
1<button ng-click="changeTom()">Change</button>
2age,<span ng-bind="tomAge"></span>
3
4<script>
5
6angular.module('myApp',[])
7  .controller("myCtrl",function($scope){
8  	
9  	$scope.isTom = false;
10  	$scope.tomAge = 16;
11  	
12  	$scope.changeTom = function(){
13  		$scope.isTom = !$scope.isTom;
14  		$scope.tomAge++;
15  	}
16  });
```
</script> </body> </html>

ng-readonly

从指定表达式返回的布尔值使HTML元素成为只读。如果表达式返回true，则该元素将变为只读，否则将变为只读。

ng-disabled

从指定表达式返回的布尔值禁用HTML元素。如果表达式返回true，则将禁用该元素，否则不会。适用于input, select,button 或 textarea标签。

1<!DOCTYPE html>
2<html ng-app ="myApp">
3<head>
4<meta charset="utf-8">
5<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
6</head>
7<body ng-controller="myCtrl">
8	<button ng-disabled="isTom">call Tom!</button>
9	<button ng-click="changeTom()">Change</button>
10	<script>
11	
12	angular.module('myApp',[])
13	  .controller("myCtrl",function($scope){
14	  	$scope.isTom = false;
15	  	$scope.changeTom = function(){
16	  		$scope.isTom = !$scope.isTom;
17	  	}
18	  });
19</script>
20</body>
21</html>
22

如果想在div、span起作用，可以通过pointer-events来实现。
<!DOCTYPE html> <html ng-app ="myApp"> <head> <meta charset="utf-8"> <style> span[disabled="disabled"] { pointer-events: none;//阻止JavaScript点击动作触发的事件 } </style> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-controller="myCtrl"> <span ng-disabled="isTom" ng-click="callTom()" >call Tom!</span> <button ng-click="changeTom()">Change</button> <script>
```
1angular.module('myApp',[])
2  .controller("myCtrl",function($scope){
3  	$scope.isTom = false;
4  	$scope.changeTom = function(){
5  		$scope.isTom = !$scope.isTom;
6  	}
7  	$scope.callTom = function(){
8  		console.log("hey tom!");
9  	}
10  });
```
</script> </body> </html>

ng-class和ng-style

ng-class和ng-style都是通过表达式来控诉是否加载Class或css样式

ng-class:表达式返回值可以是字符串，对象，或一个数组

ng-style:表达式返回值都必须是对象

1<!DOCTYPE html>
2<html ng-app ="myApp">
3<head>
4<meta charset="utf-8">
5<style>
6	
7	.yellow{
8		background-color: yellow;
9	}
10	
11	.red{
12		background-color: red;
13	}
14	
15</style>
16<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
17</head>
18<body ng-controller="myCtrl">
19	<button ng-click="changeColor()" ng-class="{'yellow':isYellow,'red':!isYellow}">ChangeMyself</button>
20	<button ng-click="changeColor()" ng-style="isYellow?yellow:red">ChangeMyself</button>
21    <script>
22    angular.module('myApp',[])
23      .controller("myCtrl",function($scope){
24        $scope.isYellow = false;
25        $scope.changeColor = function(){
26            $scope.isYellow = !$scope.isYellow;
27        }
28        
29        $scope.yellow = {
30        	"background-color":"yellow"
31        }
32        
33        $scope.red = {
34        	"background-color":"red"
35        }
36      });
37</script>
38</body>
39</html>