這篇文章的案例都是來自官方，引用的cdn來自bootcss， 因為angular的官方網站被屏了， 所以要翻， 不過我把整個文檔下回來了，方便大家下載可以點擊： 打開下載英文版
angular的指令
a標簽（也就是html的錨標簽）；
angular的所有事件直接綁定在元素的上，而且事件都是以“ng-****”開頭，比如ng-click，ng-keydown，ng-keypress，ng-mouseover....
基本的綁定事件代碼， 點擊a標簽會觸發該控制器內部$scope的alert事件;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="app-controller">
//我們先來看angular的默認的指令
a標簽（也就是html的錨標簽）；
<a href="" ng-click="alert(1)">a標簽</a>
<script>
var app = angular.module("app",[]);
app.controller("app-controller", function($scope){
console.log( $scope );
$scope.alert = function() {
alert(2)
};
})
</script>
</body>
</html>
form標簽
form標簽的默認屬性比較多, 基本上HTML所有的標簽都被angular的默認指令擴展了， 所以dom元素有很多多出來的屬性可以用，$form.$valid是指這個表單內部的所有元素是否可以通過校驗，$ngDirty, $ngInvalid, $ngPristine等;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="formExample">
<script>
angular.module('formExample', [])
.controller('FormController', ['$scope', function($scope) {
$scope.userType = 'guest';
}]);
</script>
<style>
.my-form {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
background: transparent;
}
.my-form.ng-invalid {
background: red;
}
</style>
<form name="myForm" ng-controller="FormController" class="my-form">
userType: <input name="input" ng-model="userType" required><br>
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
nono_model: <input name="nono" ng-model="nono_model" required><br>
<tt>userType = {{userType}}</tt><br>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
<tt>myForm input is nono $valid {{myForm.nono.$valid}}</tt>
</form>
</body>
</html>
表單兩種不同的狀態如圖;
input也有很多的angular屬性, ng-model是必須的， 如果input有name屬性那么，我們直接通過formName.inputName獲取該元素，ngMinLength,，ngMaxLength，ng-parttern，通過正則判斷input是否匹配，ngChange，這個是一個事件屬性，實例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="inputExample">
<script>
angular.module('inputExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.user = {name: 'guest', last: 'visitor'};
}]);
</script>
<div ng-controller="ExampleController">
<form name="myForm">
User name: <input type="text" name="userName" ng-model="user.name" required>
<span class="error" ng-show="myForm.userName.$error.required">
Required!</span><br>
Last name: <input type="text" name="lastName" ng-model="user.last" ng-minlength="3" ng-maxlength="10">
<span class="error" ng-show="myForm.lastName.$error.minlength">
Too short!</span>
<span class="error" ng-show="myForm.lastName.$error.maxlength">
Too long!</span><br>
</form>
<hr>
<tt>user = {{user}}</tt><br/>
<tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
<tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
<tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
<tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
<tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
<tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
</div>
</body>
</html>
input[checkbox]，是checkbox的input元素跟input是不一樣的，有了ng-false-value，ng-true-value這兩個屬性：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="checkboxExample">
<script>
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.value1 = true;
$scope.value2 = 'YES'
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
Value1: <input type="checkbox" ng-model="value1"> <br/>
Value2: <input type="checkbox" ng-model="value2"
ng-true-value="'YES'" ng-false-value="'NO'"> <br/>
<tt>value1 = {{value1}}</tt><br/>
<tt>value2 = {{value2}}</tt><br/>
</form>
</body>
</html>
ng-ture-value意思是如果這個input被選中，那么這個input對應的ng-model的值為ng-true-value， 上面的代碼對應的輸出如下圖；
input[date], 日期屬性, 可以設置min和max：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="dateInputExample">
<script>
angular.module('dateInputExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.value = new Date(2013, 9, 22);
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
Pick a date in 2013:
<input type="date" id="exampleInput" name="input" ng-model="value"
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.date">
Not a valid date!</span>
<tt>value = {{value | date: "yyyy-MM-dd"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</body>
</html>
日期設置了max和min，所以只能選擇指定區間的日期：
還有emai類型的inputDemo：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="emailExample">
<script>
angular.module('emailExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.text = 'me@example.com';
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
Email: <input type="email" name="input" ng-model="text" required>
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.email">
Not valid email!</span>
<tt>text = {{text}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
</form>
</body>
</html>
input[radio]，這種輸入類型有兩種屬性，第一種是value，對應的是ng-model的值，第二種是ngValue，對應的是$scope內部的變量值：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="radioExample">
<script>
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.color = 'blue';
$scope.specialValue = {
"id": "12345",
"value": "green"
};
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
<input type="radio" ng-model="color" value="red"> Red <br/>
<input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
<input type="radio" ng-model="color" value="blue"> Blue <br/>
<tt>color = {{color | json}}</tt><br/>
</form>
Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
</body>
</html>
input還有很多類型,比如input[text],input[url],input[week],input[month],input[number],angular給不同的input添加了不同的屬性，不一一羅列了;
ngApp 這個自定義指令很重要，我們上面的所有DEMO都在body元素上添加了ng-app屬性， 添加了ng-app屬性的元素會自動加載到angular模塊里面去， 所以我們就不要寫angular.bootstrap(element, ["moduleName"])， 但是自動加載的ng-app在一個頁面只能有一個， 兩個或者更多就會出現問題, 那么能才能在一個html文件添加多個angular模塊呢， 可以得，但是我們不給元素設置ng-app屬性，我們手動通過angular.bootstrap加載模塊；
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body>
<div id="ap0">
<div ng-controller="app0-c">
{{a}}
</div>
</div>
<div id="ap1">
<div ng-controller="app1-c">
{{a}}
</div>
</div>
<script>
angular.module("app0",[]).controller("app0-c",function($scope){
$scope.a = 0;
});
angular.module("app1",[]).controller("app1-c",function($scope){
$scope.a = 1;
});
angular.bootstrap( document.getElementById("ap0") ,["app0"]);
angular.bootstrap( document.getElementById("ap1"), ["app1"] )
</script>
</body>
</html>
ok，界面顯示一個0，還有一個1， 我們在一個html文件里面啟動了兩個不關聯的app了
angular的ng-bind指令, 這個指令是指ng-bind的值就是這個元素的textContent或者是innerText;ng-bind對應的一個ng-bind-html， ng-bind-html指的是ng-bind-html的值為這個元素的innerHTML, 要注意的是ng-bind-html依賴了一個叫做angular-sanitize的模塊，所以要手動導入這個JS，要么會報錯
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-sanitize.min.js"></script>
</head>
<body>
<script>
angular.module('bindExample', ["ngSanitize"])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
$scope.myHTML = 'I am an <code>HTML</code>string with ' +
'<a href="#">links!</a> and other <em>stuff</em>';
}]);
</script>
<div id="bindExample" ng-controller="ExampleController">
Enter name: <input type="text" ng-model="name"><br>
Hello <span ng-bind="name"></span>!
<p ng-bind-html="myHTML"></p>
</div>
<script>
angular.bootstrap(document.getElementById("bindExample"),["bindExample"]);
</script>
</body>
</html>
ng-bind-template指令， 這個指令跟ng-bind 差不多， ng-bind是指替換元素的textContent為ng-bind的值，ng-bind-template是指替換元素的textContent的值為ng-bind-template經過angular.parse().assign的內容;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="bindExample">
<script>
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.salutation = 'Hello';
$scope.name = 'World';
}]);
</script>
<div ng-controller="ExampleController">
Salutation: <input type="text" ng-model="salutation"><br>
Name: <input type="text" ng-model="name"><br>
<pre ng-bind-template="{{salutation}} {{name}}!"></pre>
<p>其實你直接這樣寫也行</p>
<p>{{salutation}} {{name}}!</p>
<p>壓根不需要ng-bind-template</p>
</div>
</body>
</html>
ng-if效果跟ng-show一樣， 不同的是ng-if如果是false，那么這個元素的dom節點都沒有了，如果為true，那么該節點重新加載到dom；
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="app">
Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
I'm removed when the checkbox is unchecked.
</span>
<script>
var APP = angular.module('app', []);
</script>
</body>
</html>
ng-href，如果一個錨點的鏈接是動態的，比如<a href="{{href}}">gogogo</a>，如果你點擊那么界面會調到{{href}},為了動態添加href，那么ng-href就出現了：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="app">
<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-3" ng-href="/{{'123'}}">link 3</a> (link, reload!)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />
<a id="link-6" ng-href="{{value}}">link</a> (link, change location)
<script>
var APP = angular.module('app', []);
</script>
</body>
</html>
ng-show，和ng-hide如果元素的ng-show為true，那么元素就顯示， 否則就隱藏， ng-hide同理
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body>
<div ng-app="app">
Click me: <input type="checkbox" ng-model="checked"><br/>
<div>
Show:
<div class="check-element " ng-show="checked">
<span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
</div>
</div>
<div>
Hide:
<div class="check-element " ng-hide="checked">
<span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
</div>
</div>
</div>
<script>
var APP = angular.module('app', []);
</script>
</body>
</html>
如果ng-show和ng-hide同時存在一個節點上，那么隱藏和顯示的狀態根據ng-hide展現：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body>
<div ng-app="app">
Click me: <input type="checkbox" ng-model="checked"><br/>
<div>
Show:
<div class="check-element " ng-hide="checked" ng-show="checked">
<span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
</div>
</div>
<script>
var APP = angular.module('app', []);
</script>
</body>
</html>
寫着寫着，chrome居然崩潰了， 我勒個去， 草稿都沒存；
ng-cloak存在完全是為了用戶體驗， 如果一個html界面angular.js還沒加載進來，那么界面會有{{}}這樣的標志，如果{{}}標志多了，用戶會一頭霧水啊， ng-cloak如果加在根節點，那么界面的{{}}會被隱藏，等到{{}}完全編譯成動態數據的時候界面才可見；
ng-class的用處還是很大的，通過模型綁定，我們根本不需要操作class，ng-class允許三種值：
1：對象{bold:true,red:false} 那么bold這個class會生效；
2：通過空格區分的字符串；
3：一個數組，數組的每一個值都要為一個class即可：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body>
<style>
.strike {
text-decoration: line-through;
}
.bold {
font-weight: bold;
}
.red {
color: red;
}
</style>
<div ng-app="APP">
<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
<input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
<input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
<input type="checkbox" ng-model="error"> error (apply "red" class)
<hr>
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type: bold strike red">
<hr>
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold, strike or red"><br>
<input ng-model="style2" placeholder="Type: bold, strike or red"><br>
<input ng-model="style3" placeholder="Type: bold, strike or red"><br>
</div>
<script>
angular.module("APP",[]);
</script>
</body>
</html>
ng-include指令是指這個指令標簽的innerHTML為指定的url，這個url為相對與當前目錄的url地址或者絕對地址，angular會通過ajax請求該地址， 然后把地址的內容作為指令元素innerHTML填充；
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body>
<div ng-app="includeExample" ng-controller="ExampleController">
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <tt>{{template.url}}</tt>
<hr/>
<div ng-include="template.url"></div>
<script>
angular.module('includeExample',[])
.controller('ExampleController', ['$scope', function($scope) {
$scope.templates =
[ { name: 'template1.html', url: 'template1.html'},
{ name: 'template2.html', url: 'template2.html'} ];
$scope.template = $scope.templates[0];
}]);
</script>
</div>
</body>
</html>
ng-list這個指令要和ng-model合起來用，ng-list在輸入框的表現通過split(",")的數組才是實際的model， ng-list默認為","逗號， 要設置成自定義的區分符，直接為ng-list賦值即可;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="listExample">
<form name="myForm" ng-controller="ExampleController">
List: <input name="namesInput" ng-model="names" ng-list="!" required>
<span class="error" ng-show="myForm.namesInput.$error.required">
Required!</span>
<br>
<tt>names = {{names}}</tt><br/>
<tt>myForm.namesInput.$valid = {{myForm.namesInput.$valid}}</tt><br/>
<tt>myForm.namesInput.$error = {{myForm.namesInput.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
<script>
angular.module('listExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.names = ['morpheus', 'neo', 'trinity'];
}]);
</script>
</body>
</html>
ng-model這個指令是很重要的指令，所有學習angular開發者對這個指令都無比熟悉， ng-model主要綁定的元素包括input， select， textarea
ng-model的元素都有ng-valid（可用），ng-invalid（不可用）， ng-pristine（用戶為對這個元素進行操作過）， ng-dirty（元素的模型發生改變的話）屬性； 這幾個屬性都是布爾值；
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="inputExample">
<script>
angular.module('inputExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.val = '1';
}]);
</script>
<style>
.my-input {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
background: transparent;
}
.my-input.ng-invalid {
color:white;
background: red;
}
</style>
Update input to see transitions when valid/invalid.
Integer is a valid value.
<form name="testForm" ng-controller="ExampleController">
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
</form>
</body>
</html>
ng-pattern：匹配這個輸入框的輸入值是否符合這個正則，如果不匹配，這個元素會被加上ng-invalid的class， 如果匹配會被加上ng-valid的class；
ng-model還可以指定為一個getersetter，相當於一個preSave，和preGet方法，模型的可控性變好了
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="getterSetterExample">
<div ng-controller="ExampleController">
<form name="userForm">
Name:
<input type="text" name="userName"
ng-model="user.name"
ng-model-options="{ getterSetter: true }" />
</form>
<pre>user.name = <span ng-bind="user.name()"></span></pre>
</div>
<script>
angular.module('getterSetterExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var _name = 'Brian';
$scope.user = {
name: function (newName) {
if (angular.isDefined(newName)) {
_name = newName;
}
return _name+1111;
}
};
}]);
</script>
</body>
</html>
ngModelOption ,可以設置ng-model在元素失去焦點的時候更新model
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
<form name="userForm">
Name:
<input type="text" name="userName"
ng-model="user.name"
ng-model-options="{ updateOn: 'blur' }"
ng-keyup="cancel($event)" /><br />
Other data:
<input type="text" ng-model="user.data" /><br />
</form>
<pre>user.name = <span ng-bind="user.name+user.data"></span></pre>
</div>
<script>
angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.user = { name: 'say', data: '' };
$scope.cancel = function (e) {
if (e.keyCode == 27) {
$scope.userForm.userName.$rollbackViewValue();
}
};
}]);
</script>
</body>
</html>
ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mousemove, ng-mouseover, ng-mouseup, ng-click, ng-dblclick都是ng的事件這些事件和dom的事件區別是dom事件的執行作用域是該元素， 而angular的事件執行作用域是$scope下， 現在可能不明白，以后自然就懂了；
ng-paste， ng-copy， ng-cut是一伙的，如果輸入框的值是粘帖的，那么ng-paste就為真， ng-copy，ng-cut也是同理 ， 提供了demo：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
<input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'>
pasted: {{paste}}
</div>
<script>
angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', function($scope) {
}]);
</script>
</body>
</html>
ng-non-bindable指令指該元素的內部{{****}}不被綁定和轉義，不受angular的掌控：
<div>Normal: {{1 + 2}}</div>
<div ng-non-bindable>Ignored: {{1 + 2}}</div>
的輸出值為 == 》》
Normal: 3
Ignored: {{1 + 2}}
ng-readonly指令是指ng-model的只讀， 不能隨便更改， 和ng-disabled差不多， ( •̀ ω •́ )y肯定有區別
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
<input type="text" ng-readonly="checked" value="I'm Angular"/>
<br>
Click me to toggle: <input type="checkbox" ng-model="checked_model"><br/>
<button ng-model="button" ng-disabled="checked_model">Button</button>
</div>
<script>
angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', function($scope) {
}]);
</script>
</body>
</html>
ng-open， 這個我也認為和ng-open， ng-hide差不多， 區別是ng-open只能綁定details元素，（details標簽目前只有webkit瀏覽器支持）， 當ng-open的值為open那么綁定的details內部的summary元素就顯示
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
Check me check multiple: <input type="checkbox" ng-model="open"><br/>
<details id="details" ng-open="open">
<summary>Show/Hide me</summary>
</details>
</div>
<script>
angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', function($scope) {
}]);
</script>
</body>
</html>
ng-repeat和（ng-repeat-start，ng-repeat-end）都是循環一個items， 區別是ng-repeat-start可以跨越多個標簽， 而ng-repeat只能在一個標簽里面循環， ng-repeat-start也很有用，因為可以跨多個標簽， （其實只要把ng-repeat放在ng-repeat-start的父級，可以模擬ng-repeat-start， 個人想法....）DEMO:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
使用ng-repeat-start和ng-repeat-end的循環
<header ng-repeat-start="item in items">
Header {{ item }}
</header>
<div class="body">
Body {{ item }}
</div>
<footer ng-repeat-end>
Footer {{ item }}
</footer>
使用ng-repeat的循環
<div ng-repeat="item in items">
{{item}}
</div>
</div>
<script>
angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', function($scope){
$scope.items = ['A','B'];
}]);
</script>
</body>
</html>
ng-repeat里面提供了幾個變量，為開發者提供一些快捷的操作，
$index : 表示當前item的索引,
$first : 如果item為第一個，那么$first為true ,
$middle : 如果item不是開頭，不是結尾$middle為true,
$last : 如果item是最后一個， $last為true,
$even : 如果索引為偶數， 那么$even為true,否則為false
$odd : 同上， 索引為奇數$odd為true....;
如果你喜歡的話，可以循環對象的key和value，比如
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
<div ng-repeat="(name, age) in {'adam':10, 'amalie':12}">
{{name}}+{{age}}
</div>
</div>
<script>
angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', function($scope){
}]);
</script>
</body>
</html>
ng-repeat還提供了別的特性， 讓循環更加強大， 可以這么寫 item in items | filter:x as results，結果filter過濾后的結果會被保存到results，可以這么用：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
<div ng-init="friends = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
]">
I have {{friends.length}} friends. They are:
<input type="search" ng-model="q" placeholder="filter friends..." />
<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
<li class="animate-repeat" ng-if="results.length == 0">
<strong>No results found...</strong>
</li>
</ul>
</div>
</div>
<script>
angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', function($scope){
}]);
</script>
</body>
</html>
ng-selected這個指令我是不怎么用到， 這個指令的值指向一個模型， 如果這個模型為真， 那么這個ng-selected就是select標簽的當前選中選項
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="optionsExample">
Check me to select: <input type="checkbox" ng-model="selected"><br/>
<select>
<option>Hello!</option>
<option id="greet" ng-selected="selected">Greetings!</option>
</select>
</div>
<script>
angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', function($scope){
}]);
</script>
</body>
</html>
ng-src這個指令也有用的， 界面加載的時候才不管img的標簽src有什么，都會一並加載， 如果圖片的src包含了{{****}}這些字符， 瀏覽器不會管這是什么東西， 在渲染dom樹的時候，會直接請求這個地址，如果想通過{{****}}動態生成img標簽的src，不要用src，要用ng-src。
script標簽可以作為ng-include的模板使用，把類型type設置為"text/ng-template":
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="optionsExample">
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script>
<a ng-click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a>
<div id="tpl-content" ng-include src="currentTpl"></div>
<script>
angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', function($scope){
}]);
</script>
</body>
</html>
ng-switch這個指令相當於通過$scope內部變量控制dom的隱藏和顯示：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="switchExample">
<div ng-controller="ExampleController">
<select ng-model="selection" ng-options="item for item in items">
</select>
<tt>selection={{selection}}</tt>
<hr/>
<div class="animate-switch-container"
ng-switch on="selection">
<div class="animate-switch" ng-switch-when="settings">Settings Div</div>
<div class="animate-switch" ng-switch-when="home">Home Span</div>
<div class="animate-switch" ng-switch-default>default</div>
</div>
</div>
<script>
angular.module('switchExample',[])
.controller('ExampleController', ['$scope', function($scope) {
$scope.items = ['settings', 'home', 'other'];
$scope.selection = $scope.items[0];
}]);
</script>
</body>
</html>
通過ng-switch來控制dom結構，其實這個指令非常強大哦， 相當於是為html代碼提供了ifelse的功能（因為angular的html中不能通過ifelse控制邏輯）：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="switchExample">
<div ng-controller="ExampleController">
<div ng-repeat="item in items">
<div ng-switch="item">
——————————————————————
<div ng-switch-when="settings">Settings Div</div>
<div ng-switch-when="home">Home Span</div>
<div ng-switch-default>default</div>
</div>
</div>
</div>
<script>
angular.module('switchExample',[])
.controller('ExampleController', ['$scope', function($scope) {
$scope.items = ['settings', 'home', 'other'];
$scope.selection = $scope.items[0];
}]);
</script>
</body>
</html>
ng-value這個指令的demo：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script> </head> <body ng-app="valueExample"> <script> angular.module('valueExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.names = ['pizza', 'unicorns', 'robots']; $scope.my = { favorite: 'unicorns' }; }]); </script> <form ng-controller="ExampleController"> <h2>Which is your favorite?</h2> <label ng-repeat="name in names" for="{{name}}"> {{name}} <input type="radio" ng-model="my.favorite" ng-value="name" id="{{name}}" name="favorite"> </label> <div>You chose {{my.favorite}}</div> </form> </body> </html>
ng-style指令demo， 這個指令接收一個對象， 對象的key為css名字，val為樣式的值， val我們可以綁定$scope中的變量：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="styleModule">
<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
<script>
angular.module("styleModule",[])
</script>
</body>
</html>
周末好快就過完了，睡(￣o￣) . z Z一覺起床上班啦， 因為寫的匆忙， 有錯別字或者代碼錯誤歡迎指正；