angularJS指令系統---Directive

指令：Directive  

angularJS 有一套完整的，可拓展的，用來幫助web應用開發的指令集；

在創建DOM期間，和HTML關聯着的指令會被檢測到，並被執行；

在angularJS中將前綴爲 ng- 這種屬性稱之爲指令，其做用就是爲DOM元素調用方法，定義行爲綁定數據等；

簡單說：當一個angular 應用啓動時，angular會遍歷DOM樹來解析HTML，根據指令不一樣，完成不一樣的操做；

指令屬性小提示：

ng-xxx 的屬性並非標準中定義的屬性，不少狀況下語法校驗是沒法經過的；

HTML5容許拓展（自制的）的屬性，以data- 開頭；

在angularJS中能夠使用 data-ng- 來讓網頁對HTML有效（二者效果都是同樣的）

<hrml ng-app>
<hrml data-ng-app>

 ng-app指令：

ng-app 指令用來代表一個 angularJS 應用程序；

標記在一個 angularJS 的做用範圍在根對象上；

系統執行的時候會自動的執行根對象範圍內的指令；

能夠在一個頁面建立多個 ng-app 節點（不推薦），緣由：建立多個 ng-app 時，默認只能執行第一個，後面的須要進行手動引導：angular.bootstrap()

標記的範圍儘量小，性能優化

 多個 ng-app 的使用： 

<div ng-app="myAppOne" ng-controller="myAppOneController">
<input type="button" value="按鈕一" ng-click="show()">
</div>
<div ng-app="myAppTwo" ng-controller="myAppTwoController">
<input type="button" value="按鈕二" ng-click="show()">
</div>
</body>
<script type='text/javascript' src='bower_components/angular/angular.js'></script>
<script type="text/javascript">
var myAppOne = angular.module('myAppOne',[]);
myAppOne.controller('myAppOneController',['$scope',function($scope){
    $scope.show = function(){console.log('1');};
}]);
var myAppTwo = angular.module('myAppTwo',[]);
myAppTwo.controller('myAppTwoController',['$scope',function($scope){
    $scope.show = function(){console.log('2');};
}]);
//手動引導讓第二個div被myAppTwo管理
angular.bootstrap(document.querySelector('[ng-app="myAppTwo"]'),['myAppTwo']);
//上面這種方法，能夠解決，可是angularJS不推薦，推薦使用的是：
//建立一個新模塊，去管理其餘的模塊 接下來將ng-app="myApp"
angular.module('myApp',['myAppOne'],['myAppTwo']);
</script>

 

ng-bind指令：

做用：將做用域（scope）中的值綁定到元素的 innerHTMl 中，其效果會比經過表達式綁定的方式會更加友好：

若是綁定的內容有HTML，就會自動轉義：

<div ng-app ng-init="dataName='張三'">
    <h1 ng-bind="dataName"></h1>
</div>

若是要綁定HTMl，須要引入 angular-sanitize 這個包：

即便引入這個包，仍是會有有問題：

緣由：

引進了的文件，若是想要用它提供的模塊，就必須讓咱們的模塊去依賴它裏面的模塊，才能使用它的模塊；

若是直接寫ng-app，是直接使用angularjs提供的一個默認的模塊，這個模塊是沒有去依賴這個東西的，因此不會生效；

這樣就能夠生效：

<div ng-app ng-init="dataName='<span>love</span>'">
    <h1 ng-bind-html="dataName"></h1>
</div>
</body>
<script type='text/javascript' src='bower_components/angular/angular.js'></script>
<script type="text/javascript" src="bower_components/angular/angular-sanitize.js"></script>

 

ng-cloak指令：

ng-cloak指令用於在AngularJS 應用在加載時防止angularJS代碼未加載玩而出現的問題；

angularJS應用在加載時，文檔可能會因爲angularJS代碼未加載完而出現顯示angularJS代碼，進而會有閃爍的效果，ng-clock指令就是爲了阻止該問題的發生

閃一下的問題，除了能夠用ng-bind，可是這個屬性，比較適用於一兩個元素，若是元素比較多的狀況就能夠是以使用ng-cloak：
執行機制：當angular在執行的過程當中，會在這個元素上默認保持不動，angular在執行完以後，會自動移除這個屬性；

 

ng-show / ng-hide 指令：

ng-show / ng-hide指令會根據屬性值去肯定是否展現當前元素，例如：ng-show=false則會不會顯示該元素

使用這個作一個遮罩層的顯示隱藏：

<style type="text/css">
div.shadow{background-color: rgba(0,0,0,0.5); position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;}
</style>
<div class="shadow" ng-app="myApp" ng-show="loading" ng-controller="myAppController"></div>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('myAppController',['$scope','$timeout',function($scope,$timeout){
    $scope.loading = true;    
    $timeout(function(){
        $scope.loading = false;
    },3000);
}]);
</script>

 

ng-if指令：

決定一個元素是否存在；ng-if = "true/false";

ng-show : 元素是否顯示；

ng-hide：元素是否隱藏；

ng-if：元素是否存在；

 

ng-href / ng-src 指令：

ng-href / ng-src 指令用於解決當連接類型的數據綁定形成的加載BUG，如：

<!-- 瀏覽器在解析HTML時會請求{{item.url}} -->
<img src="{{item.url}}">
<!-- 能夠使用ng-src解決問題 -->
<img ng-src="{{item.url}}">

 

ng-switch指令：

ng-switch指令根據表達式顯示或隱藏對應的部分。

對應的子元素使用 ng-switch-when 指令，若是匹配選擇顯示，其餘未匹配的則會被移除；

你能夠經過使用 ng-switch-default 指令設置默認選項，若是都沒有匹配的狀況，默認選項會顯示；

ng-switch指令的效果：
ng-switch須要配合 ng-switch-when和ng-switch-default來使用：

<div ng-app>
    <select ng-model="myVar">
        <option value='jd'>www.jd.com</option>
        <option value='taobao'>www.taobao.com</option>
        <option value='baidu'>www.baidu.com</option>
    </select>
    <div ng-switch="myVar">
        <div ng-switch-when="jd">www.jd.com</div>
        <div ng-switch-when="taobao">www.taobao.com</div>
        <div ng-switch-when="baidu">www.baidu.com</div>
        <div ng-switch-default="baidu">請選擇</div>
    </div>
</div>

 

其餘經常使用指令：

ng-cheched : 單選 / 複選是否被選中；

ng-disabled : 是否禁用；

ng-readonly : 是否只讀；

ng-selected : 是否選中；

<div ng-app>
    <!-- 都不選中 -->
    <input type="checkbox" ng-model="true">
    <input type="checkbox" ng-checked="true">
</div>

實現全選和全不選：

<div ng-app>
    <p><input type="checkbox" ng-model="checked">全選或者全不選</p>
    <li>選項0<input type="checkbox" ng-checked="checked"></li>
    <li>選項0<input type="checkbox" ng-checked="checked"></li>
    <li>選項0<input type="checkbox" ng-checked="checked"></li>
    <li>選項0<input type="checkbox" ng-checked="checked"></li>
    <li>選項0<input type="checkbox" ng-checked="checked"></li>
    <li>選項0<input type="checkbox" ng-checked="checked"></li>
</div>

 

經常使用的事件指令：

ng-blur : 失去焦點；

ng-change : 發生改變；

ng-copy : 拷貝完成；

ng-click : 單擊；

ng-dbclick : 雙擊；

ng-focus : 得到焦點；

ng-submit : 表單提交；

 

angularJS 的指令系統中還有一塊是：自定義指令；（稍微麻煩，在此不作贅述）