AngularJS 學習筆記 （五） 基本概念和用法 之 指令

一、解析最簡單的指令hello，匹配模式restrict

    html代碼：

    

    JS代碼：

    

PS：我理解的是以這4種方式獲取元素，而後替換成template的樣式。

二、解析最簡單的指令hello，template、templateUrl、$templateCache

    2.1 template

    

    仍是這個例子，template中的字符串替換原指令上的東西。

    2.2 templateUrl

    

    PS：這裏想到的好比登陸框~就能夠用一個，而後出現一個登陸框，能夠在頁面隨意調用。只要使用就能夠了。

    2.3 $templateCache

    

    PS：這裏對$template.put("xx.html","tt")理解的很差。

            引入xx.html時，xx.html中有內容。爲何加上第二個參數以後，內容就顯示不出來了

            難道是隻是起個名字叫作xx.html？之後好相認？求指導！

三、解析最簡單的指令hello，replace與transclude

    3.1 replace

    

    3.2 transclude (百度翻譯：嵌入)

    html代碼：

    

    JS代碼：

    

    運行效果：

    

    運行效果解析：

    

四、comile與link（操做元素、添加CSS樣式、綁定事件）

    

五、指令與控制器之間的交互

    html代碼：

    

    JS代碼:

    

    PS：這裏要多看一遍，才能大概理解。可使用scope.$apply("loadData");達到一樣的效果

    5.2 指令和多控制器的交互

    html代碼：

    

    JS代碼：

    

    運行效果1：初始時狀態

   

    運行狀態2：當鼠標在進入「滑動加載」時

    

    運行狀態3：當鼠標在進入「滑動加載2」時

    

    理解指令和控制器的交互：  

1.  單對單：

   1. 在控制器MyCtrl中定義方法loadData();
   2.   在指令中定義標籤，利用link方式定義DOM操做。
   3. 當運行時，達到觸發條件後，調用loadData()方法，操做DOM變化。

2. 單指令對多控制器

   1. 再定義一個控制器MyCtrl2，在其中再定義一個方法loadData2()
   2. 在HTML頁面增長新元素MyCtrl2和其子層。
   3. 在標籤中增長屬性howToLoad，並分別賦值loadData()和loadData2()
   4. 上述步驟使用howToLoad屬性做爲公共變量，存放相應的控制器中的方法。這樣作的好處是，能夠統一調取howToLoad屬性，一個x.directive("loader",func(){}}})就能夠了。

六、指令間的交互

    html代碼：

    

    JS代碼：

    

    運行效果，當鼠標進入時：

    

    思考：（先吐槽，這個遊戲一點意思也沒有！！！！我失落了很久）

1. html中增長標籤， 並增長 strength、speed、light屬性。
2. 在JS中使用directive，建立superman的指令。
3. 而且使用controller：function(){}給指令建立方法。等待被調用。
4. 再增長link：function(){}，指定觸發方式和觸發效果。
5. 在JS中再建立依賴superman指令的指令。使用require:"^superman"
6. 並綁定在superman的controller中定義的方法。
7. 效果就是當superman標籤有什麼屬性時，就輸出這個屬性。
8. 因此我最後給這個所謂的遊戲起名爲，點誰就展現誰的能力。（自我知足吧）

七、scope的類型與獨立的scope

    html代碼：

    

    JS代碼：

    

    運行效果1：

    

    運行效果2：若是不使用scope:{}

    

PS：若是沒有使用獨立scope，則任意地方輸入內容，其餘地方所有都受影響。

八、scope綁定策略

    @方式

    html代碼：

    

    JS代碼：

    

    運行效果：是以字符串方式傳遞

    

    =方式：

    html代碼：

    

    JS代碼：

    

    運行效果1:

    

    PS：運行以後，修改任意地方的數據，另外一個數據也會改變。

    &方式：

    html代碼：

   

    JS代碼：

    

    運行效果：

    

    理解過程：

1. 結構如上
2. button的ng-click使用「&」方式，並傳入參數，參數是模型上面的input的內容。
3. 找到HTML頁面的greeting標籤內的greet屬性，greet屬性綁定了sayHello方法，並帶入參數。
4. 觸發MyCtrl控制器中的sayHello方法，頁面彈出Hello+name的提示框。

九、AngularJS內置指令

這裏講的比較草，主要的是仍是去看文檔。

能夠定義新的標籤，也能夠重寫過去的標籤。

一個例子，使用form標籤：

    HTML代碼：

    

    JS代碼：

    

這裏要解釋幾個東西就會清晰：

1. required指令: 至關於html5的required屬性,驗證不能爲空
2. ng-maxlength屬性: 驗證內容的長度最大值
3. ng-minlength屬性: 驗證內容的長度最小值
4. 表單名.$valid : 這個屬性用來獲取表單驗證的狀態,若是全部的驗證都經過了,它就是true,只要有一項不經過,它就是false
5. ng-disabled屬性: 判斷按鈕是否禁用. 值爲true時,禁用該按鈕
6. type屬性: type="email" , type="number" ,雖然這些都是html5的屬性,可是在angular中用法一致,能夠兼容不支持html5的瀏覽器,實現相同的功能

PS：重點，這裏的重點，重點在於啃文檔，多練習！

十、實例解析Expander（展開）—— 自定義指令

一個展開關閉的小例子

    HTML代碼：

    

    JS代碼：

    

    運行效果：點擊前和點擊後的效果

     

挺好理解的：這裏運用了以前的知識點transclude，果真仍是實踐出真知。

十一、實例間隙Accordion（複合）

一個展開關閉的複雜例子

    HTML代碼：

    JS代碼：

    CSS代碼：

    

    運行效果：默認爲都關閉。點擊一個打開一個。最多隻顯示一個是打開的。

    理解過程：

1. 不知道從何提及，這是圖片有詳細的備註，多看多試！
2. 有一個坑，<expander expander-title="expander.title">
3. 獨立scope設置，title："=expaderTitle" 綁定title
4. 若是有 "-"連接，則獨立scope中"-"後面的要大寫，以區分。(好坑！)

十二、指令的運行原理：compile與link

1. compile和link是互斥的，若是設置了compile則會忽略link
2. compile是在編譯階段中執行的，link是在連接過程當中執行的。
3. 換句話說compile是在編譯DOM以前操做DOM的；
4. link是在DOM編譯完成以後，再操做DOM的。

 

1三、總結：ERP類型的系統必備的UI組件

PS：這裏是用的miniui。網址：http://miniui.com/

1四、總結：互聯網/電商型系統必備的UI組件

PS：地址錯誤，更新地址  http://docs.kissyui.com/

1五、第三方指令庫angular-ui

用到的時候再說吧

github地址：http://angular-ui.github.io/ 

 

1六、Driective思想的起源和原理概述

這裏是採訪原做者 ，他說原理是啓發自FLEX。

 

 

洋洋灑灑學了2個星期的指令，感受仍是皮毛。代碼果真仍是項目上手最快！