摘要：事件只針對輸入框值的真實修改，而不是通過來修改。指令將給定表達式的值替換元素的內容。指令還有另外一種轉換方式，如果你有字符串數組希望在輸入框中顯示，你可以在上使用指令。

指令系統（Directive）是Angular應用的一個重要特性。

是通過對DOM元素的標簽丶屬性來增強HTML表現力，為其增加一些特定功能。
本篇參考文檔Angular菜鳥教程

這里介紹的是常用的一些angularJs內置指令：

1、ng-model
這個是將表單控件和當前作用域的屬性進行綁定。需要注意綁定的scope的范圍（父scope與子scope）。
ng-model主要綁定的元素包括input， select， textarea 。
ng-model的元素都有：
ng-valid（可用），
ng-invalid （不可用）
ng-pristine（用戶為對這個元素進行操作過），
ng-dirty（元素的模型發生改變的話）屬性； 這幾個屬性都是布爾值。

2、ng-init
該指令被調用時會初始化內部作用域。一般不建議使用此參數。

3、ng-app
用于告訴 AngularJS 應用當前這個元素是根元素。
所有 AngularJS 應用都必須要要一個根元素。
HTML 文檔中只允許有一個 ng-app 指令，如果有多個 ng-app 指令，則只有第一個會被使用。
下邊是關于ng-app需要注意的點：
   1>這個是必需的。使用該指令自動啟動一個AngularJS應用。
   2>ngapp指令指定的應用程序的根元素，通常放置在網頁的根元素如body或html 標簽。
   3>只有一個AngularJS應用可以自動引導每個HTML文檔。
   4.第一ngapp找到該文件將定義自動引導的根元素的應用。
   5>運行多個應用程序在一個HTML文件，您必須手動引導他們使用angular.bootstrap。
   6>AngularJS應用不能互相嵌套。 
   7>你可以指定一個AngularJS模塊被用于應用程序的根模塊。
   8>該模塊將被加載到應用程序時，引導到$injector對象中。
   9>它應該包含所需的應用程序代碼，或依賴于將包含代碼的其他模塊的依賴關系。

4、ng-controller
用于為你的應用添加控制器。

//expression     控制器名。

在控制器中，你可以編寫代碼，制作函數和變量，并使用 scope 對象來訪問。

5、ng-form
Angular表單其實是Angular提供的Directive，它有一個別名叫ng-form。是這個Directive實例化了一個FormController來負責表單內的頁面邏輯（主要是表單驗證）。

6、ng-disabled
設置表單輸入字段的 disabled 屬性(input, select, 或 textarea)。
如果 ng-disabled 中的表達式返回 true 則表單字段將被禁用。
我們可以在AngularJS中通過表達式返回值true/false令其生效。

//expression 如果表達式返回true，則設置為元素添加 disabled 屬性。

7、ng-readonly
設置表單輸入字段設為只讀。
可以通過表達式返回值true/false將表單輸入字段設為只讀。

8、ng-checked
設置是否選中復選框。
其中 ng-true-value="""" ng-false-value=""""，可用來設置選中時或不選中時對應的值

9、ng-selected
用于設置  列表中的  元素的 selected 屬性。
ng-selected 屬性的表達式返回 true 則選項被選中。
10、ng-show/ng-hide
根據表達式顯示/隱藏HTML元素，注意是隱藏，不是從DOM移除（ng-if才是移除）
對于大對象的DOM，可以用它，但如果是小對象的DOM，建議使用ng-if
11、ng-change
ng-change 指令用于告訴 AngularJS 在 HTML 元素值改變時需要執行的操作。
ng-change 指令需要搭配 ng-model 指令使用。
AngularJS ng-change 指令指令不會覆蓋原生的 onchange 事件, 如果觸發該事件，ng-change 表達式與原生的 onchange 事件都會執行。
ng-change 事件在值的每次改變時觸發，它不需要等待一個完成的修改過程，或等待失去焦點的動作。
ng-change 事件只針對輸入框值的真實修改，而不是通過 JavaScript 來修改。
12、{{}}
其實這個也是一個指令，也許覺得和ng-bind差不多，但頁面渲染略慢時可能會被看到。
另外，{{}}的執行遠不如ng-bind，只是用起來很方便。
13、ng-bind
使用給定的變量或表達式的值來替換 HTML 元素的內容。
如果給定的變量或表達式修改了，指定替換的 HTML 元素也會修改。
ng-bind的行為和{{}}差不多，只是我們可以用這個指令來避免FOUC(Flash Of Unrendered Content)未渲染導致的閃爍。
ng-bind-template指令
將給定表達式的值替換 HTML 元素的內容。
當你想在 HTML 元素上綁定多個表達式時可以使用 ng-bind-template 指令。

14、ng-cloak
ng-cloak也可以為我們解決FOUC。 ng-cloak會將內部元素隱藏，直到路由調用對應的頁面。
FOUC ：文檔樣式短暫失效
如果使用import方法對CSS進行導入,
會導致某些頁面在Windows 下的Internet Explorer出現一些奇怪的現象:
以無樣式顯示頁面內容的瞬間閃爍,這種現象稱之為文檔樣式短暫失效(Flash of Unstyled Content)
存在完全是為了用戶體驗， 
如果一個html界面angular.js還沒加載進來，
那么界面會有{{}}這樣的標志，如果{{}}標志多了，用戶會一臉蒙蔽 啊， 
ng-cloak如果加在根節點，那么界面的{{}}會被隱藏，等到{{}}完全編譯成動態數據的時候界面才可見；
15、ng-if
如果ng-if中的表達式為false，則對應的元素整個會從DOM中移除而非隱藏，
但審查元素時你可以看到表達式變成注釋了。如果相進行隱藏，可以使用ng-hide。
16、ng-switch
ngSwitch指令包含ng-switch-when、ng-switch-default功能類似switch，
ng-switch-when指條件條件符合將顯示這個dom元素， 
ng-switch-default指條件都不符合默認顯示的元素。
17、ng-repeat
遍歷集合(數組)，給每個元素生成模板實例，每個實例的作用域中可以用一些特殊屬性，如下

$index : 表示當前item的索引,
$first : 如果item為第一個，那么$first為true ,
$middle : 如果item不是開頭，不是結尾$middle為true,
$last : 如果item是最后一個，  $last為true,
$even : 如果索引為偶數， 那么$even為true,否則為false
$odd : 同上， 索引為奇數$odd為true....;



18、ng-src
指令覆蓋了 
　　那么在頁面開始加載到ng編譯完成之前，頁面上會一直顯示一張錯誤的圖片，因為路徑{{imgUrl}}還未被替換。
為了避免這種情況，我們使用ng-src指令，這樣在路徑被正確得到之前就不會顯示找不到圖片。同理，a標簽的href屬性也需要換成ng-href，這樣頁面上就不會先出現一個地址錯誤的鏈接。
19、ng-href
覆蓋了原生的 a 元素 href 屬性。
如果在 href 的值中有 AngularJS 代碼，則需要使用 ng-href 而不是 href。
ng-href 指令確保了鏈接是正常的，即使在 AngularJS 執行代碼前點擊鏈接。



20、ng-class
指令用于給 HTML 元素動態綁定一個或多個 CSS 類。
ng-class 指令的值可以是字符串，對象，或一個數組。
如果是字符串，多個類名使用空格分隔。
如果是對象，需要使用 key-value 對，key 為你想要添加的類名，value 是一個布爾值。只有在 value 為 true 時類才會被添加。
如果是數組，可以由字符串或對象組合組成，數組的元素可以是字符串或對象。
21、ng-click
點擊事件


//
$scope.event=function(){}


22、ngKeyup
23、ngKeydown
24、ngKeypress
25、ngMousedown、ngMouseenter、ngMouseleave、ngMousemove、ngMouseover、ngMouseup
鼠標事件
26、ngTrim
去除左右空格
27、ng-include
指令用于包含外部的 HTML 文件。
包含的內容將作為指定元素的子節點。
ng-include 屬性的值可以是一個表達式，返回一個文件名。
默認情況下，包含的文件需要包含在同一個域名下。
ng-include指令是指這個指令標簽的innerHTML為指定的url
這個url為相對與當前目錄的url地址或者絕對地址
angular會通過ajax請求該地址
然后把地址的內容作為指令元素innerHTML填充；
28、ng-list
指令將字符串轉換為數組，并使用逗號分隔。
ng-list 指令還有另外一種轉換方式，如果你有字符串數組希望在輸入框中顯示，你可以在 input 上使用 ng-list 指令。
ng-list 屬性值定義了分隔符。
ng-list這個指令要和ng-model合起來用
ng-list在輸入框的表現通過split(",")的數組才是實際的model
ng-list默認為","逗號
要設置成自定義的區分符，直接為ng-list賦值即可;
29、ng-pattren
匹配這個輸入框的輸入值是否符合這個正則，如果不匹配，這個元素會被加上ng-invalid的class， 如果匹配會被加上ng-valid的class
在表單校驗中為詳細介紹。。
30、ng-paste  ng-copy ng-cut 
用于告訴 AngularJS 文本在 HTML 元素上粘貼時需要執行的操作。
ng-paste 指令不會覆蓋元素的原生 onpaste 事件, 事件觸發時，ng-paste 表達式與原生的 onpaste 事件將都會執行。
如果輸入框的值是粘帖的，那么ng-paste就為真。
ng-copy，ng-cut也是同理
31、ng-non-bindable
　ng-non-bindable指令指該元素的內部{{**}}不被綁定和轉義，不受angular的掌控：
32、ng-open
用于設置 details 列表的 open 屬性。
如果 ng-open 的表達式返回 true 則 details 列表是可見的。
這個個人認為和ng-show， g-hide差不多， 區別是ng-open只能綁定details元素，
 標簽用于描述文檔或文檔某個部分的細節。
（details標簽目前只有webkit瀏覽器支持）
33、input里的一些屬性
novalidate屬性（可無值）到form標簽上，這樣可以保證在表單不合法的情況下阻止瀏覽器繼續提交數據。
 使用 ng-model 屬性進行綁定的表單，會自動的添加一些 class 樣式，如：
@非必填表單
初始化時會添加 .ng-pristine 和 .ng-valid 兩個class樣式。當表單為非空時 class 樣式會變成 .ng-valid 和 .ng-dirty 。其中將 .ng-pristine 變成了 .ng-dirty 。 
@必填表單
初始化時會添加 .ng-pristine 、.ng-invalid 和 .ng-invalid-required 三個class樣式。當表單為非空時 class 樣式會變成 .ng-dirty 、.ng-valid 和 .ng-valid-required 。
ngMinLength,，ngMaxLength，ng-parttern，通過正則判斷input是否匹配，
表單驗證屬性：
$dirty     表單有填寫記錄
$valid     字段內容合法的
$invalid     字段內容是非法的
$pristine     表單沒有填寫記錄
ng-change，ng-vlaue就只是設置值而已  不雙向綁定數據
（同樣在表單驗證中會詳細介紹）
自定義指令
自定義是AngularJ非常強大而有有用的功能之一。它就相當于為我們寫了公共的自定義DOM元素或Class屬性或Attr屬性，還可以在它的基礎上來操作scope、綁定事件、更改樣式等。通過這個Directive，我們可以封裝很多公共指令，比如分頁指令、自動補全指令等等。然后在HTML頁面里只需要簡單的寫一行代碼就可以實現很多強大的功能。
一般情況下，需要用Directive有下面的情景：
1.使你的Html更具語義化，不需要深入研究代碼和邏輯即可知道頁面的大致邏輯。
2.*抽象一個自定義組件，在其他地方進行重用。
指令的屬性
先上代碼
angular.module("MetronicApp").directive("directiveName", function factory(injectables) {
  var directiveObject = {　　
        priority: 0,
    　　template: "
helloworld
",
    　　templateUrl: "directive.html",
    　　replace: false,
    　　transclude: false,
    　　restrict: "EA",
    　　scope: false,
    　　link: function postLink($scope, $element, $attrs) {
    　　//code
        }
        controller: ["$scope", function ($scope) {
        //code
        }
   };
   return directiveObject
});
name就是指令名
對應上面代碼中的directiveName
restrict  定義指令的出現形式
（字符串）可選參數，指明指令在DOM里面以什么形式被聲明；
取值有：E(元素),A(屬性),C(類),M(注釋)，其中默認值為A；
當然也可以兩個一起用，比如EA.表示即可以是元素也可以是屬性。
E(元素)： 
A(屬性)：
 
C(類)： 
 
M(注釋)：<--directive:directiveName expression-->  
鑒于瀏覽器兼容問題。推薦 restrict :"A",即取值為屬性。

scope 作用域，與值綁定
（1）默認值false。表示繼承父作用域;
（2）true。表示繼承父作用域，并創建自己的作用域（子作用域）;
（3）{}。表示創建一個全新的隔離作用域；
   scope: {
 　　   lover: "=",
   　　 name: "@",
  　　  say: "&"
　　}
但是，如果我想將父scope中的屬性傳遞給directive的scope怎么辦呢？
directive 在使用隔離 scope(新的作用域) 的時候，提供了三種方法同隔離之外的地方交互：
"@" 綁定一個局部 scope 屬性到當前 dom 節點的屬性值。結果總是一個字符串，因為 dom 屬性是字符串。
"&" 提供一種方式執行一個表達式在父 scope 的上下文中。如果沒有指定 attr 名稱，則屬性名稱為相同的本地名稱。
"=" 需要實現雙向數據綁定的時候使用。（最常使用）
template模板
可以使一段html代碼。
template: "
helloworld
",
也可以是一個實例函數：
其中$element,是指使用此指令的元素，而$element,則實例的屬性，它是一個由元素上所有的屬性組成的集合（對象）

////////
template: function($element, $attrs){ 
   var _html = ""; 
   _html += "
" +"hello "+ $attrs.title+"
"; //這里的title就是這個指令里的title屬性。
   return _html; 
   } 
 }; 

同樣有很明顯的一個缺點，你也可以將整個template寫得很復雜，但是，復雜的代碼非常不易維護。并且你還得換行，得用字符串拼接每一行。過長的template建議使用templateUrl代替。
templateUrl模板
templateUrl為從指定地址獲取模板內容。即你要在指令所在的容器中插入的一個.html文件。
當使用templateUrl模板時，需要運行一個服務器，不然使用templateUrl會報錯 Cross Origin Request Script（CORS）錯誤。
由于加載html模板是通過異步加載的，若加載大量的模板會拖慢網站的速度，項目中對模板進行了緩存，是可取之處。如下
 

這里的id屬性就是被設置在templateUrl上用的。
這里的templateUrl類似于JSP中的include。有沒有明白一點。
replace
是否用模板替換當前元素。
true : 將指令標簽替換成temple中定義的內容,頁面上不會再有標簽；
false ：則插入當前元素內，即模板的內容包在標簽內部。默認false。
transculde：
是否使用ng-transculde來包含html中指令包含的原有的內容，接收兩個參數true/false。默認值為false；
這個配置選項可以讓我們提取包含在指令那個元素里面的內容，再將它放置在指令模板的特定位置。當你開啟transclude后，你就可以使用ng-transclude來指明了應該在什么地方放置transcluded內容。
有些高階的東西，用的不好就是bug。
link
可以簡單理解為，當改自定義指令被angular 編譯后，執行該方法。
主要的三個參數
$scope(當前指令內部作用域，和scope綁定有關), 
$element(指的是html中的指令標簽的對象，可以理解成$（"directive對象"），類似jquery的選擇器。), 
$attrs(指令元素的屬性的集合)
link在angular編譯后執行
link函數主要用于操作dom元素,給dom元素綁定事件和監聽.
controller
同link的區別在于
controller操作的是業務邏輯。所以通常使用的只有$scope參數。并且可以通過注入方式依賴其他模塊。
如下
controller: ["$scope", "$location","UrlConfigService", function ($scope, $location,UrlConfigService) {
    $scope.onActionClick = function (row, parentMethod) {
            //code
        };
}

compile
這個是在angular編譯階段執行的方法。compile在編譯前執行，目的是負責把template（包括transclude所引用的）變成一個完整的DOM結構。
關于angular的編譯過程這里給大家一個鏈接，可做了解。angular編譯及生命周期
priority
多個指令設置在同一個元素上的執行優先級,執行順序從低高:1>2>3；
priority的值為正整數，比如priority: 1,
ngHello的優先級肯定要高于ngWorld，不過實際中沒人這么用，這里只做講解。
angular.module("MetronicApp").directive("ngHello",function(){ 
 return{ 
  restrict: "EA",
  priority: 1,
  link : function(){
   //code
  }   
 }; 
})

angular.module("MetronicApp").directive("ngWorld",function(){ 
 return{ 
  restrict: "EA",
  priority: 2,
  link : function(){
   //code
  }   
 }; 
})


terminal
兩個參數true/false 如果為true,本指令的優先級高于同一個元素上的其他指令，其他指令將停止執行。同樣實際中不使用，只做了解。
angular.module("MetronicApp").directive("ngBook",function(){ 
 return{ 
  restrict: "EA",
  priority: 3,
  terninal: true, //這里為true,ngHello和ngWorld都將停止執行
  link : function(){
   //code
  }   
 }; 
})

指令的部分先介紹到這，如果在今后的實踐中有發現不足和缺失再繼續完善。此篇是讓大家對指令有個規范了解。在項目中方便理解指令用法。例如table列表帶分頁（ng-table），查詢列表（ng-tableinput） 展示列表（ng-list）（industry-field） 。也方便在今后自己封裝，拆分一些公共功能模塊。
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         云服務器
                                             
                         GPU云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               AngularJS
                                                                                                           六鐘頭
                                                                                                           六十行
                                                                                                           六點網絡
                                                         
                 
               
              
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
                 
                   
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92715.html
               
                      
               

                 
                                  
上一篇：AngularJs功能（七）--服務
  
                                                
                                       
下一篇：【Amaple教程】5. 插件
                                  
              
              

                
相關文章
                

                             
                                                                                                    

                                                

                          
關于Angularjs中自定義指令一些有價值的細節和技巧
                                                     
摘要：屬性為時，指示優先級小于當前指令的指令都不執行，僅執行到本指令。

作者：心葉時間：2018-04-22 10:58
一：自定義指令常用模板
下面是大致的說明，不是全面的，后面來具體說明一些沒有提及的細節和重要的相關知識：
angular.module(yelloxingApp, []).directive(uiDirective, function() {

    return {
...
                                                   
                          

                                

                                    Markxu
                                    2019-08-22 16:35
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
AngularJS簡述
                                                     
流行框架
簡介

angularjs是一款非常優秀的前端高級JS框架，由谷歌團隊開發維護，能夠快速構建單頁web應用，化繁為簡
無論是angularjs還是jQuery都是用原生JS封裝的
庫：對代碼進行封裝，調用封裝的方法，簡化操作
傳統方式是用get方式獲取元素，然后點方法
jQuery庫實現了對獲取方式的封裝，對方法的封裝
框架：提供代碼書寫規則，按照規則去寫代碼，框架會幫我們實現響應的功能...
                                                   
                          

                                

                                    Jason
                                    2019-08-23 11:25
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
AngularJs 入門（一）--前言
                                                     
摘要：入門一前言目前來說相對于現在流行的高版本以及來說實屬是老套的前端框架了，當然這都不重要，沒有完美的框架，只有不斷優化的代碼。通過使用我們稱為指令的結構，讓瀏覽器能夠識別新的語法。使用作為輸入，而不是字符串，是區別于其它的框架的最大原因。

AngularJs 入門（一）
前言

AngularJs目前來說相對于現在流行的高版本ng2、ng4,以及Vue2.0、React來說實屬是老套的前...
                                                   
                          

                                

                                    wenyiweb
                                    2019-08-22 13:50
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
發表評論
                   

                                      
                      

                        登陸后可評論
                      
                   
               
              

                

                  
0條評論
   
                
 
                      

              
           
           

              
 
                

                    
                    
Mertens
                    
男|高級講師
                    

                     
                                                                      我要關注
      
                                                                                        我要私信
                     
                                            
                    
                    

                          
TA的文章
                          閱讀更多
                    
                      

                                                  
使用tensorflow
                            
閱讀 2890·2023-04-26 00:26
                                                       
tensorflow框架
                            
閱讀 3498·2023-04-25 14:30
                                                       
趣味Python題目10月8日
                            
閱讀 3390·2021-10-09 09:44
                                                       
自學大數據前，零基礎，三個月，找到一份測試工作
                            
閱讀 3685·2021-09-28 09:35
                                                       
虛擬主機怎么搭建云免-虛擬主機怎么弄成云電腦啊？
                            
閱讀 1862·2021-09-22 16:02
                                                       
微軟宣布Windows Server 2022全面上市
                            
閱讀 1257·2021-09-03 10:30
                                                       
面試之旅-深圳 遇到的問題和一些自己的拓展以及答案1
                            
閱讀 3229·2019-08-30 15:53
                                                       
css3+less隨機動畫總結
                            
閱讀 2160·2019-08-30 14:07
                                                
                      
                

                   
              
  

                  
最新活動
 
           
         

                    

                      

                                                                                                                       

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              



                                
              
           
        
       
    
    
     

      
    
    
    

    
       
       

         
閱讀需要支付1元查看
  
         
支付并查看
     
       
      
  
    
    













<