angularjs學習筆記三——directive

時間 2019-11-19

標籤 angularjs 學習筆記 directive 欄目 AngularJS 简体版

原文原文鏈接

AngularJS 經過被稱爲指令的新屬性來擴展 HTML。javascript

正如你所看到的，AngularJS 指令是以 ng 做爲前綴的 HTML 屬性。css

HTML5 容許擴展的（自制的）屬性，以 data- 開頭。html

AngularJS 屬性以 ng- 開頭，可是您可使用 data-ng- 來讓網頁對 HTML5 有效。前端

如下列舉了一些指令，並不必定經常使用，可是都有用！java

有些指令相關的demo，有興趣的能夠下載，github地址：https://github.com/392468072/demogit

自帶指令

一、ng-app此指令聲明angular的邊界，也就是應用程序入口（固然沒有ng—app指令的時候也不要奇怪，還有其餘方法能夠作入口，angular.bootstrap（element，[modules]，config））github

二、ng-bind 就是綁定模板，其實和{{hash}}的效果是同樣的，不過要注意的是{{hash}}在各類緣由下可能會被用戶看到，帶來很差的用戶體驗express

三、ng-model 它連接了頁面可交互元素（input，textarea之類的）和位於$scope之上的model，這兒有點亂，本身理清楚便可bootstrap

四、ng-controller設置子做用域對象$scope（父做用域爲$rootScope）的初始狀態，給子做用域$scope增長行爲，控制業務邏輯數組

五、ng-init 初始化數組，能夠方便測試，如今已經不推薦使用了

六、ng-repeat迭代輸出 orderBy：「keyword」能夠指定輸出順序

七、ng-click 容許自定義行爲某個元素被點擊，固然其它事件指令都有相似的做用如：

　　ng-dbclick雙擊　　ng-mouseDown按下鼠標左鍵　　ng-mouseUp鬆開鼠標左鍵　　ng-mouseOver鼠標移出　　ng-mouseEnter鼠標移入

　　ng-copy 文本被複制　　ng-paste文本被粘貼　　ng-select文本被選擇 ng-change ng-blur ng-keydown等等，固然還有不少，就不11列出了

八、ng-submit 這確定和form表單相關咯，對，就是submit form的意思

九、ng-href/ng-src 連接，這裏可能會有人問，爲何不直接用html標籤的屬性呢？href/src = 「{{hash}}」

　　由於官方說：The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}.

　　若是瀏覽器將{{hash}}裏的值,也即src/href屬性值替換成文本之後可能就中止幹活了.

十、ng-if 接收boolean值，若爲false，它控制的DOM節點會被刪除，若爲true就會建立被插入DOM節點

十一、ng-include 能夠在模板中嵌入其餘模板，實現前端頁面的複用

十二、ng-non-bindable指令指該元素的內部{{****}}不被綁定和轉義，不受angular的掌控

1三、ng-pluralize 應該是使成爲複數

1四、ng-show/ng-hide 顯示、隱藏元素

1五、ng-style設置style 接收一個css對象 ng-style={{cssObj}}

1六、ng-switch這個指令至關於經過$scope內部變量控制dom的隱藏和顯示，其實這個指令很是強大， 至關因而爲html代碼提供了ifelse的功能 （由於angular的html中不能經過ifelse控制邏輯）

1七、ng-transclude自定義標籤

自定義指令

最後說明：指令是能夠自定義的

具體的有4種表現方式：

E 頁面標籤，也就是新的html元素<hello-angular></hello-angular>　　
A 元素的屬性<input type="text" hello-angular="" />
C css類選擇器的值<input type="text" class="hello-angular"/>
M 註釋

先來建立一個自定義指令（13—23行代碼）

 1 <!DOCTYPE html>
 2 <html ng-app="app">
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>自定義指令demo</title>
 6     </head>
 7     <body>
 8         <div ng-controller="testCon">
 9             <hello-angular>beauty</hello-angular>
10         </div>
11         <script type="text/javascript" src="js/angular.js"></script>
12         <script>
13             angular.module('app',[])
14             .directive('helloAngular',function(){
15                 return{
16                     restrict:'AECM',
17                     template:'<p>hello,<b ng-transclude></b></p>',
18                     transclude:true
19                 };
20             })
21             .controller('testCon',function($scope){
22                 
23             });
24         </script>
25     </body>
26 </html>

輸出： hello，beauty

沒錯就是上面那個輸出，不信能夠試試咯！

restrict：　　　翻譯爲」限制「，也許細心的人會發現這個屬性，一一對應指令的四種變現方式，這就對了，這就是被容許的表現方式

templace：　　這其中是標籤也能夠是字符串，不是標籤的話會報錯，它的兄弟屬性是templateUrl，二者只需其一

templateUrl： url？是的，必須是url才行咯，想一想看，若是沒有這個屬性，template將會承載全部的標籤，若是你要添加很長的一段代碼，那麼template的屬性值會很長很長，

　　　　　　　確定會不方便咯

transclude：前面那個<b>標籤的屬性ng-transclude確定和這個有關係對吧，設置爲true，一個乾坤大挪移就把<hello-angular>移動到template中的<b>標籤裏面咯

接着，小小的改下代碼，17 18行改爲下面這樣，看俺replace的做用

1 restrict:'AECM',
2 replace:true,
3 template:'<p>hello</p>'

replace：從單詞的意思就能夠看出來，替代，沒錯，就是用<p>hello</p>替代頁面上的<hello-angular><hello-angular>

不要問滷煮爲何，本身敲一敲就ok。

再來一段代碼，說明下面scope的用法

 1 <!DOCTYPE html>
 2 <html ng-app="app">
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>自定義指令demo</title>
 6     </head>
 7     <body>
 8         <div ng-controller="testCon">
 9             <hello-angular info="person"></hello-angular>
10         </div>
11         <script type="text/javascript" src="js/angular.js"></script>
12         <script>
13             angular.module('app',[])
14             .directive('helloAngular',function(){
15                 return{
16                     restrict:'AECM',
17                     scope:{
18                         personReference:'=info'
19                     },
20                     template:'He is {{person.name}}'    
21                 };
22             })
23             .controller('testCon',function($scope){
24                 $scope.person = {name:'Tom',age:180};
25             });
26         </script>
27     </body>
28 </html>

scope：自定義做用域，沒有這個屬性時默認使用父級controller的$scope，有socpe{}時，此scope繼承父級controller的$scope

綁定策略的三種形式」=「，「@」，「&」將本地做用域和DOM中的屬性值綁定起來

」=「對一個對象的引用，後面的info是自定義標籤中的屬性（第9行代碼），簡而言之，personReference對象是person對象的引用

」@「表示對一個字符串的拷貝<ps:這兒不太肯定，不過根據js來看，應該是這樣>，這裏再也不贅述

」&「表示對父級做用域進行綁定，並將其中的屬性包裝成一個函數

 1 <!DOCTYPE html>
 2 <html ng-app="app">
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>自定義指令demo</title>
 6     </head>
 7     <body>
 8         <div ng-controller="testCon">
 9             <hello-angular get-classes="classes" get-name="name"></hello-angular>
10         </div>
11         <script type="text/javascript" src="js/angular.js"></script>
12         <script>
13             angular.module('app',[])
14             .directive('helloAngular',function(){
15                 return{
16                     restrict:'AECM',
17                     scope:{
18                         getClasses:'&',
19                         getName:'&'
20                     },
21                     template:'there are {{classes}} classes<br /><div ng-repeat="i in name">NO.{{$index+1}} className is {{i}}</div>',
22                     controller:function($scope){
23                         $scope.classes = $scope.getClasses();
24                         $scope.name = $scope.getName();
25                     }
26                 };
27             })
28             .controller('testCon',function($scope){
29                 $scope.classes = 3;
30                 $scope.name = ['A','B','C'];
31             });
32         </script>
33     </body>
34 </html>