樣式相關指令
ng-class
通過指令的方式設置class樣式。有三種方法：
1. 通過$scope綁定（不推薦）
<div class="{{className}}"></div>
function ctrl($scope) {
$scope.className = "selected";
}
2. 通過對象數組綁定
<div ng-class="{true:'selected',false:'unselected'}[isSelected]"></div>
function ctrl($scope) {
$scope.isSelected = true;
}
當isSelected爲true時，增加selected樣式；當isSelected爲false時，增加unselected樣式。
3. 通過key/value鍵值對綁定
<div ng-class="{'A':isA,'B':isB,'C':isC}"></div>
function ctrl($scope) {
$scope.isA = true;
$scope.isB = false;
$scope.isC = false;
}
當isA爲true時，增加A樣式；當isB爲true時，增加B樣式；當isC爲true時，增加C樣式。
幾點說明：
1、不推薦第一種方法，因爲controller $scope應該只有數據和行爲
2、ng-class是增加相關樣式，可以和class同時使用
ng-style
通過指令的方式設置行間樣式
<pre>
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
</style>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller("Aaa",["$scope",function($scope){
$scope.text="hello";
$scope.style1={color:'red',backgroundColor:'yellow'};
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<!-- 針對同一種樣式，後者覆蓋前者-->
<div ng-class="{red:true,yellow:true}">{{text}}</div>
<!--<div ng-style="{color:'red',backgroundColor:'yellow'}">{{text}}</div>-->
<div ng-style="style1">{{text}}</div>
</div>
</body>
</html>
</pre>
ng-href
ng-src
ng-href及ng-src與原生JS的相比，除了能動態改變，還能在JS沒有解析完時，使ng-href內的表達式看不見,即和上文提到過，實現數據顯示優化處理。
<a ng-href="{{url}}">進入</a>,與<a href="{{url}}">進入</a>相比，用戶體驗會更好一些。
ng-attr-(suffix) 是更通用的寫法
<a ng-attr-href="{{url}}" ng-attr-title="{{text}}" ng-attr-style="style1">aaa</a>
基本上對於html標籤的內置屬性都能使用這種方式。
DOM操作相關指令
- ng-show
- ng-hide
ng-show與ng-hide都是操作display屬性，值的類型爲boolean。 - ng-if
針對dom元素節點進行添加和刪除操作，與ng-show/ng-hide不同。 ng-switch
<pre> <input type="checkbox" ng-model="bBtn"> <!--ng-switch指令與on屬性是配對操作的，on屬性中寫的是要綁定的數據的變量名--> <div ng-switch on="bBtn"> <p ng-switch-default>默認的效果</p> <!--true是on屬性綁定的數據的值--> <p ng-switch-when="true">切換的效果</p> </div> </pre>ng-open
主要是針對details標籤,動態控制該標籤內容的展開及收縮
html標籤–> details,只支持chrome和safari瀏覽器。
該標籤運行後效果，是在sumary左邊出現一個三角箭頭，點擊sumary或箭頭能展開和收縮p標籤的內容。<pre> <input type="checkbox" ng-model="bBtn"> <details ng-open="bBtn"> <summary>手機</summary> <p>它是一種移動通話設備。購買手機請上天貓</p> </details> </pre>
指令擴展部分
ng-init
用來初始化數據。之前是用$scope來初始化數據，還可用ng-init來實現。<pre> <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <script type="text/javascript"> var app=angular.module("app",[]); app.controller("Aaa",["$scope",function($scope){ //$scope.text="hello"; $scope.arr=[['a','b'],['c','d']]; }]); </script> </head> <body> <!-- 與在js中通過"$scope.text="hello";"初始化數據的效果是一樣的--> <!-- <div ng-controller="Aaa" ng-init="text='hello'"> {{text}} </div>--> <div ng-controller="Aaa"> <div ng-repeat="arrOuter in arr" ng-init="outerIndex=$index"> <div ng-repeat="arrInner in arrOuter" ng-init="innerIndex=$index"> {{arrInner}}:{{outerIndex}}:{{innerIndex}} </div> </div> </div> </body> </html> </pre>兩種方式，用$scope方式來設置更好一些，會更清晰，並且不容易出錯。
ng-include
包含一段模板或一段代碼使之引入頁面中。<pre> // temp.html <ul> <li>111</li> <li>222</li> <li>333</li> </ul> //index.html <div ng-controller="Aaa" ng-include="temp.html"> </div> </pre>ng-model
雙向數據綁定
有時候不想t1的值隨着用戶輸入立刻變化，而是等輸入框失去焦點再變化，這時需要引入ng-model-options。
ng-model-options:控制雙向綁定時，數據變化過程。<pre> <div ng-controller="Aaa"> <input type="text" ng-model="t1" ng-model-options="{updateOn: 'blur' }"> <div>{{t1}}</div> </div> </pre>ng-controller
控制器，是連接數據與視圖的橋樑。
angularJs支持面向對象的寫法。
<pre> <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <script type="text/javascript"> var app=angular.module("app",[]); app.controller("Aaa",["$scope",FnAaa]); //構造函數 function FnAaa($scope){ } FnAaa.prototype.num="123"; FnAaa.prototype.text="hello"; FnAaa.prototype.show=function(){ return 'angularJs'; } </script> </head> <body> <!--as是ng-controller中的一個創建對象的屬性--> <div ng-controller="Aaa as a1"> {{a1.text}}:{{a1.show()}}<!--運行結果：hello:angularJs--> </div> </body> </html> </pre>
