ng-init:初始化。初始化操作，這里用一段代碼解釋一下吧，代碼如下:
<div ng-init="city='上海'"> <p>{{city}}</p></div>這里的ng-init=”city=’上海’”;相當(dāng)于給controller中的$scope.city=”上海”;這樣的一個初始化效果。通過指令我們可以在html元素中做初始化，而不是在javascript代碼中初始化。
ng-bind:數(shù)據(jù)綁定。相當(dāng)于{{}}的效果同樣的我們用代碼解釋下吧,代碼如下:
<div ng-init="name='張三'"> <p ng-bind="name"></p></div>這里的ng-bind=”name”相當(dāng)于{{name}}，所以說ng-bind效果相當(dāng)于{{}}。
ng-repeat:循環(huán)輸出指令。通過這個指令我們可以循環(huán)添加dom元素，來看看代碼是如何實現(xiàn)的吧。
<div ng-init="cityArr=['北京','上海','廣州','深圳']"> <ul> <li ng-repeat="city in cityArr" ng-bind="city"></li> </ul></div>這里ng-init初始化了一個cityArr數(shù)組，通過ng-repeat指令循環(huán)遍歷了這個數(shù)組，city in cityArr中，cityArr是數(shù)組，city是cityArr中的每一個元素，然后通過ng-bind指令把每個元素的數(shù)據(jù)綁定到li中。顯示結(jié)果這里不上圖了，可以復(fù)制代碼測試效果。
ng-include:導(dǎo)入其他html文件。類似于jQuery的load,但是ng-include有以下的特點: ng-include指定純地址時這個地址要加單引號。ng-include加載外部html時，script標(biāo)簽中的代碼不執(zhí)行，不能加載。ng-include加載外部html時，可以style標(biāo)簽的內(nèi)容,line標(biāo)簽可以識別。我們來看看如何使用ng-include吧，代碼如下:
<div ng-include="'shoppingCar.html'"></div>如上代碼shoppingCar.html是添加了單引號的，是一個html。用法和jQuery的load用法差不多。
從上邊這些事件指令可以看出，就是在js的事件前面添加了ng。那我們要如何使用事件指令呢？ 用法如下代碼:
<body ng-app="eapp"> <div ng-controller="econtroller"> <button ng-click="change()">提示</button> </div> <script> var eapp=angular.module("eapp",[]); eapp.controller("econtroller",function ($scope) { $scope.change=function () { alert("您點擊了按鈕"); } }); </script></body>如上面的代碼，我們用事件指令時直接引用一個function就行，但是前提是這個function必須是屬于你當(dāng)前的controller，所以如上的change一樣，是屬于econtroller。
那使用事件指令時我們怎么獲取event事件對象呢?把上邊的代碼稍微更改一下，代碼如下:
<body ng-app="eapp"> <div ng-controller="econtroller"> <button ng-click="change($event)">提示</button> </div> <script> var eapp=angular.module("eapp",[]); eapp.controller("econtroller",function ($scope) { $scope.change=function (event) { console.log(event); alert("您點擊了按鈕"); } }); </script></body>在事件指令使用時往function中傳參$event，這樣就能使用event事件對象了。其他事件指令用法也差不多，這里就不多介紹了。
還有很多指令，這里就介紹這么多把。我們來看看各個指令的用法:
ng-style (添加css樣式) 代碼如下
<body ng-app="napp"> <div ng-controller="ncontroller"> <div ng-style="mystyle">呵呵</div> </div> <script> var napp=angular.module("napp",[]); napp.controller("ncontroller",function ($scope) { $scope.mystyle={ "color":"blue", "background-color":"red" }; }); </script></body>ng-style的參數(shù)mystyle是一個寫著css樣式的js對象，這是ng-style的用法。
ng-class (添加class) 代碼如下:
<style> .font_color{ color: red; background-color: blue; }</style> <div ng-controller="ncontroller"> <div ng-class="{font_color:true}">hello angular</div></div>ng-class通過{}引用class以{font_color:ture}的形式添加class，”:”后的true表示是否引用這個樣式，是一個boolean值，如果是true則引用該class，反之則不用這個class。
ng-class-even (偶數(shù)時添加class),ng-class-odd (奇數(shù)時添加class) 代碼如下
<style> /*樣式代碼*/ .blue{ color: red; background-color: dodgerblue; } .red{ color: blue; background-color: red; }</style><body ng-app="napp"> <div ng-controller="ncontroller"> <ul> <!--ng-class-even，ng-class-odd經(jīng)常和ng-repeat一起使用--> <li ng-repeat="city in cityArr" ng-class-even="{red:true}" ng-class-odd="{blue:true}" >{{city}}</li> </ul> </div> <script> var napp=angular.module("napp",[]); napp.controller("ncontroller",function ($scope) { $scope.cityArr=["北京","上海","廣州","深圳"]; }); </script></body>代碼如上，ng-class-even,ng-class-odd的用法和ng-class類似。這兩個指令經(jīng)常和ng-repeat一起使用，當(dāng)為偶數(shù)時使用ng-class-even的class，當(dāng)為奇數(shù)時使用ng-class-odd的class。
ng-show,ng-hide,ng-if(隱藏或者顯示)，代碼如下:
<body ng-app="napp"> <div ng-controller="ncontroller"> <span ng-show="isShow">Hello Angular</span> <button ng-click="show()">{{change}}</button> </div> <script> var napp=angular.module("napp",[]); napp.controller("ncontroller",function ($scope) { $scope.isShow=true; $scope.change="隱藏"; $scope.show=function () { if($scope.isShow){ $scope.isShow=false; $scope.change="顯示"; }else{ $scope.isShow=true; $scope.change="隱藏"; } } }); </script></body>通過點擊事件來控制顯示和隱藏，這三個的用法差不多，我這里只寫ng-show了。后面的參數(shù)是一個boolean類型的值，ng-show當(dāng)參數(shù)的值為true是這個元素顯示，當(dāng)ng-show參數(shù)為false時這個元素隱藏。剩下的ng-hide和ng-if可以按照上面這里例子寫，用法相同。
ng-switch 與流程控制的switch的用法相同
<body ng-app="napp"> <div ng-controller="ncontroller"> <div ng-switch="mypage"> <div ng-switch-when="taobao">淘寶網(wǎng)</div> <div ng-switch-when="baidu">百度一下</div> </div> <button ng-click="change()">切換</button> </div> <script> var napp=angular.module("napp",[]); napp.controller("ncontroller",function ($scope) { $scope.mypage="taobao"; $scope.change=function () { if($scope.mypage==="taobao"){ $scope.mypage="baidu"; }else{ $scope.mypage="taobao"; } } }); </script></body>代碼如上，
ng-switch=”mypage”,對mypage這個變量進(jìn)行篩選ng-switch-when的參數(shù)表示的是變量某個具體的值通過點擊事件切換mypage變量的值3. 當(dāng)mypage的變量改變時，angular自動觸發(fā)臟檢查，switch的內(nèi)容也隨之改變，當(dāng)切換到”taobao”時顯示的是”淘寶網(wǎng)”,當(dāng)切換到”baidu”時顯示的是”百度一下”。Angular的內(nèi)置指令就介紹這么多了，有什么不足和錯誤希望補充與指出!
新聞熱點
疑難解答
