An in-depth explanation of the use of custom directives in AngularJS_AngularJS

AngularJS’s custom instructions are your own instructions, plus the native core functions that the compiler runs when compiling the DOM. This can be difficult to understand. Now, let's say we want to reuse some specific code across different pages in our application without duplicating the code. Then, we can simply put this code into a separate file and call the code using the custom directive instead of typing it out over and over again. Such code is easier to understand. There are four types of custom directives in AngularJS:

1. Element command
2. Attribute command
3. CSS class directive
4. Comment command

Before implementing them in our existing app, let’s take a look at what custom directives look like:

Element Command

Write the following tag in html, which is used to place code snippets. When we want to use a specific code, we include the code using the above tag.

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

In the JS file, use the following lines of code to make the above angularJS custom directive effective.

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

Code explanation:

Like app.controller, we first define app.directive, and then define guitarReview, which is the element tag name used in html. But have you noticed that guitar-review and guitarReviews are different? This is because the hyphen in guitar-reviews is converted to camel case, so it becomes guitarReviews in the JS file. The next step is the anonymous function that is returning parameters. restrict: 'E' means that we are defining a custom element directive, and templateUrl points to the code snippet file to be included.

Attribute directive

Type the following attributes in the html tag of the html file. This tag is used to hold code snippets. When we want to use a specific piece of code, we just type a tag like this to include the code.

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

In the JS file, use the following code to make the above angularJS custom directive effective.

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

Note: AngularJS recommends that you use simple css and ordinary comments instead of CSS and comments in custom directives.

Now let’s implement custom commands in the app. You can download the project files here. I put the code for the reviews part into a separate file, then assigned the code snippet to an element, and finally used it in the details.html page.

First step

Create a new folder named cDirectives under the specified folder to store customized instructions. Then, create a reviews.html file in this folder to hold the user's reviews. At this point, your folder hierarchy looks like this:

Step 2

Cut the review section in details.html and add the 4497174f9f174b8218bf7bf6ba7b3d372a930d0a16296f5087645d4ecae7994b tag as follows:

Step 3

Copy the code you cut in the details.html page to reviews.html as shown below:

<!-- 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 -->

Step 4

It is now possible to add actions in the user-reviews tag. Let’s open controller.js and add the following code:

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

Code explanation:

Our 4497174f9f174b8218bf7bf6ba7b3d37 directive here becomes userReviews (in camel form) and the hyphen is gone. Below we can say that when it is called the file in templateURL is loaded and the directive is restricted to element E.

We just customized a directive. Even though it looks like nothing has changed in our application, our code is now better planned than before. Can you customize directives for descriptions and specifications? Try it yourself.