Off the Ridge code

Off the Ridge Code Newsletter

Search

How to AngularJS – Part 5 – Built-in Directives and custom Directives

Published May 4, 2015 in AngularJS - 0Comments

In this post I’d like to talk about directives, both built-in directives that ship as part of AngularJS as well as how to create your own custom directives.

So, what are directives in AngularJS:

Directives in AngularJS, in short, are a way to teach HTML new tricks, they are markers on DOM elements. For example: The way we make data show on the screen is through the use of binding expressions  {{ scope.property  }} which is a type of Data binding directive.

However there are many other directives that ship with AngularJS, some of which you’ve already seen:

  • ngController
  • ngApp
  • ngBind
  • ngClick

and, many others, The full list can be found here: AngularJS API

There are 4 ways that directives can be applied.

1. As a tag form: <ng-bind>

2. As an attribute: <div ng-bind>

3. As a class: <div class=”ng-bind”>

4. As an HTML Comment.

Let’s look at ngModel and ngClick, and how we can incorporate those into our application.

Step by Step:

1.First, I’m going to turn the JavaScript function expression into an AngularJS function on the scope.

i.e. this:

var getGitHubUser = function(username) {
         gitHubUserLookup.lookupUser(username).then(onLookupComplete, onError);
};
into:
$scope.getGitHubUser = function(username) {
        gitHubUserLookup.lookupUser(username).then(onLookupComplete, onError);
};
and remove the explicit call inside the MyFirstController.js to getGitHubUser(userData.user.username);

2. We’re going to allow the user to type in a user name they wish to lookup. We’ve already removed the ‘automatic’ call to the getGitHubUser(…) function; now, we’re going to add a text input box and button click.
The text input box will have the ngModel directive associated with it.
ngModel directive binds input controls to a property on the scope or, in other words binds our view to the model.

Notice the dash inside the ng-model directive. Directives inside the AngularJS source code are defined using camelCase i.e. in this case ngModel. However, when we use them inside the HTML we need to use spinal-case. i.e. ng-model; hence, ngModel and ng-model refer to the same thing.

 
<a name="userinputwithclick"></a>
 <label>User:<input type="text" /></label>
  <button>GO</button>

These are all the changes required to enable the user to type in and lookup any user they wish to. No custom JavaScript or jQuery is necessary to grab the user name and execute the call. This is the AngularJS way!

Now, let’s see how we can write a custom directive and create a custom element.

I’m going to turn our input box and button click into a directive.

Step by Step:

1. I’m going create a new file called directives.js. To register a custom directive with AngularJS we use a keyword: ‘module.directive‘. It’s very similar to how we registered custom filters.
We pass a name of the directive as a first parameter. What we need to return from the directive is a directive definition object.

I’m going to replace the entire markup inside the index.html page:

  <div><label>User: <input type="text" /></label>
  <button>GO</button></div>

with a single element directive .

Custom directive

I’m going to use the ‘template’ property here:

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

    return {
      restrict: 'E',
       template: "<label>User:<input type="text" /></label><button>GO</button>"
      };
  });

The restrict ‘E’ means that we are using this directive as an element.

That’s all, everything should work as before.

Looking up AngularJS team in Github

Full example and happy coding!

-Sebastian