Introduction to the use of custom directives in Angularjs

This article mainly introduces the use of the custom instructions in Angularjs, Angularjs is a popular JavaScript development library, the need for friends can refer to the

Angularjs's custom instructions are your own instructions, plus the native core functions that are run when the compiler compiles the DOM. This may be difficult to understand. Now let's say we want to reuse some specific code in different pages of the application without duplicating the code. So we can simply put this code in a separate file and call the code that uses the custom directive instead of knocking it over and over again. Such code is much easier to understand. There are four kinds of custom directives in Angularjs:

Element directives

Attribute directives

CSS class directives

Comment directives

Before we implement them in our existing apps, let's look at what a custom directive looks like:

Element directives

Write the following label in HTML, which is used to place code snippets. When we want to use a particular code, we use the label above to include the code.

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

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

app.directive('guitarReviews',function() {

 return{

  restrict  :'E',// used E because of element

  templateUrl :'custom-directives/reviews.html'

 };

});

Code Explanation:

As with App.controller, we first define the app.directive and then define Guitarreview, which is the element tag name used in HTML. But did you notice that Guitar-review and guitarreviews are different? This is because the guitar-reviews character conversion to the Hump case, so in the JS file into a guitarreviews. The next step is the anonymous function that is returning the parameter. Restrict: ' E ' means that we are defining a custom element instruction, while templateurl points to the code fragment file to include.

Attribute directives

In the HTML file, in the HTML tag, typing the following attribute, this tag is used to hold the code fragment. When we want to use a particular piece of code, we just hit the tag to include the code.

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

In the JS file, use the following code to make the above ANGULARJS custom instruction effective.

app.directive('guitarReviews',function() {

 return{

  restrict  :'A',// used A because of attribute

  templateUrl :'custom-directives/reviews.html'

 };

});

Note: Angularjs recommends that you replace CSS and annotations in custom directives with simple CSS and regular annotations.

Now let's implement custom directives in the app. You can download the project file here. I put the reviews part of the code into a separate file, then assign the code fragment to an element and finally use it in the Details.html page.

First step

Creates a new folder under the specified folder named Cdirectives, which is used to store the custom instructions. Then, create a reviews.html file under the folder that holds the user's reviews. At this point, your folder hierarchy is as follows:

Second Step

Cut the review section in details.html and addthe label as follows:

Third Step

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

<!-- Review Tab START, it has anewcontroller -->

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

  

<!-- AddnewReview to specific guitar - clickthislink 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 addReviewfunctionwithguitarID -->

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

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

</div><br /><!-- END Review Tab -->

Fourth Step

You can now add behavior to the User-reviews tab. 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:

Ourinstructions become userreviews here (in the form of camel) and the hyphen is missing. We can say that when it is called, it loads the file in Templateurl and restricts the instruction to element E.

We have just customized a directive. Although it seems that there is no change in our application, our code is now well planned compared to the previous. Can you customize the instructions for the description and specification? Try it yourself.