首頁 >web前端 >js教程 >深入講解AngularJS中的自訂指令的使用_AngularJS

深入講解AngularJS中的自訂指令的使用_AngularJS

WBOY
WBOY原創
2016-05-16 15:53:581201瀏覽

AngularJS的自訂指令,就是你自己的指令,加上編譯器編譯DOM時執行的原生核心函式。這可能很難理解。現在,假設我們想要在應用程式中不同頁面重複使用一些特定的程式碼,而又不複製程式碼。那麼,我們就可以簡單地把這段程式碼放到單獨的文件,並呼叫使用自訂指令的程式碼,而不是一遍又一遍地敲下來。這樣的程式碼比較容易理解。 AngularJS中有四種類型的自訂指令:

  1.     元素指令
  2.     屬性指令
  3.     CSS class 指令
  4.     註解指示

在我們現有的app中實作他們之前,我們來看看自訂指令是什麼樣子:
 
元素指令

在html中寫下如下的標籤,它用來放置程式碼片段。當我們想要使用特定的程式碼,我們就用上述標籤來包含該程式碼。

<guitar-reviews> ... </guitar-reviews>

在JS檔案中,用以下幾行程式碼來使上述angularJS自訂指令生效。
 

app.directive('guitarReviews', function() {
 return {
  restrict  : 'E', // used E because of element 
  templateUrl : 'custom-directives/reviews.html'
 };
});

代碼解釋:

如同app.controller,我們先定義app.directive,然後定義guitarReview,後者是html中用到的元素標籤名稱。但你注意到沒有,guitar-review 和guitarReviews是不同的?這是因為 guitar-reviews的連字號轉換到駝峰式大小寫,因而在JS檔中就變成了guitarReviews。下一步是正在傳回參數的匿名函數。 restrict: ‘E' 是指我們在定義一個自訂元素指令,而 templateUrl則指向要包含的程式碼片段檔。
 
屬性指令

在html檔案的html標籤中敲入以下屬性,這個標籤用來盛裝程式碼片段。當我們想要使用特定程式碼片段,我們只要敲下這樣的標籤來包含該程式碼。
 

<div guitar-reviews> ... </div>

在JS檔案中,用以下程式碼來使上述angularJS自訂指令生效。
 

app.directive('guitarReviews', function() {
 return {
  restrict  : 'A', // used A because of attribute 
  templateUrl : 'custom-directives/reviews.html'
 };
});

注意: AngularJS 推薦你用簡單的 css 和普通的註釋代替自訂指令中的CSS和註釋.

現在讓我們在app中實作自訂指令吧。你可以在這裡下載專案檔。我把reviews部分的程式碼放到單獨的文件,再把該程式碼片段賦給一個元素,最後在details.html頁面使用.
 
第一步

在指定的資料夾下方新建一個資料夾命名為cDirectives,用來存放自訂的指令。然後,在該資料夾下建立一個reviews.html文件,用於持有使用者的reviews。此時,你的資料夾層次結構如下:

2015618121816801.png (152×250)

 第二步

在details.html中剪下review部分,並加入標籤如下所示:

2015618121835496.png (1024×573)

 第三步

將你在details.html頁面中剪下的程式碼拷貝至reviews.html如下圖:

<!-- Review Tab START, it has a new controller -->
<div ng-show="panel.isSelected(3)" class="reviewContainer" ng-controller="ReviewController as reviewCtrl" >
 
<!-- User Reviews on each guitar from data.json - simple iterating through guitars list -->
<div class="longDescription uReview" ng-repeat="review in guitarVariable[whichGuitar].reviews"> 
  <h3>Review Points: {{review.star}} </h3>
  <p> {{review.body}} ~{{review.name}} on <date>{{review.createdOn | date:'MM/yy'}} </p>
</div><!-- End User Reviews -->
 
<!-- This is showing new review preview-->
<div ng-show="add === 1" class="longDescription uReview" > 
  <h3>Review Points: {{reviewCtrl.review.star}} <span ng-click="add=0">X</span></h3>
  <p> {{reviewCtrl.review.body}} ~ {{reviewCtrl.review.name}} </p>
</div>
 
<!-- Add new Review to specific guitar - click this link to show review adding pannel -->
<a href ng-click="add=1" class="addReviewLink">Add review</a>  
 
<!-- form validates here using form name and .$valid and on submission we are going to addReview function with guitarID -->
<form class="reviewForm" name="reviewForm" ng-submit="reviewForm.$valid && reviewCtrl.addReview(guitarVariable.indexOf(guitarVariable[whichGuitar]))" novalidate ng-show="add===1" >
  <div>
    Review Points: 
    <!-- ng-option here is setting options, cool&#63; -->
    <select ng-model="reviewCtrl.review.star" ng-options="point for point in [5,4,3,2,1]" required >    
    </select>
    Email: 
    <input type="email" ng-model="reviewCtrl.review.name" required>
    <button type="submit">Submit</button>
    </div>
    <textarea placeholder="Enter your experience with this guitar..." ng-model="reviewCtrl.review.body"></textarea>
</form><!-- END add new review -->
</div><br /><!-- END Review Tab -->

 
第四步

現在可以在user-reviews標籤中加入行為了。讓我們打開controller.js,加入以下程式碼:

GuitarControllers.directive('userReviews', function() {
 return {
  restrict  : 'E', // used E because of element 
  templateUrl : 'partials/cDirectives/reviews.html'
 };
});

 

代碼解釋:

我們的指令在這裡變成了userReviews(以camel形式表示)並且連字符不見了。下面我們可以說,當它被呼叫時載入templateURL中的檔案並且對元素E限制該指令。

我們剛剛自訂了一個指令。儘管看起來我們的應用程式中沒有變化,但是現在我們的程式碼較之前已經進行了很好的規劃。你能為描述和規格自訂指令嗎?自己嘗試一下吧。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn