Angularjs – Directives

What are Directives?

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Matching Directives

Before we can write a directive, we need to know how Angular’s HTML compiler determines when to use a given directive.

$compile can match directives based on element names, attributes, class names, as well as comments.

All of the Angular-provided directives match attribute name, tag name, comments, or class name. The following demonstrates the various ways a directive (myDir in this case) can be referenced from within a template:

<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>

Template-expanding directive

Let’s say you have a chunk of your template that represents a customer’s information. This template is repeated many times in your code. When you change it in one place, you have to change it in several others. This is a good opportunity to use a directive to simplify your template.

Let’s create a directive that simply replaces its contents with a static template:

Script.js:

angular.module('docsSimpleDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.customer = {
      name: 'Naomi',
      address: '1600 Amphitheatre'
    };
  }])
  .directive('myCustomer', function() {
    return {
      template: 'Name: {{customer.name}} Address: {{customer.address}}'
    };
  });
index.html:
<div ng-controller="Controller">
  <div my-customer></div>
</div>

Great! But what if we wanted to have our directive match the tag name <my-customer> instead? If we simply put a <my-customer>element into the HTML, it doesn’t work.

Note: When you create a directive, it is restricted to attribute only by default. In order to create directives that are triggered by element or class name, you need to use the restrict option.

The restrict option is typically set to:

  • 'A' – only matches attribute name
  • 'E' – only matches element name
  • 'C' – only matches class name

These restrictions can all be combined as needed:

  • 'AEC' – matches either attribute or element or class name

Let’s change our directive to use restrict: 'E':

Script.js:

angular.module(‘docsRestrictDirective’, [])
.controller(‘Controller’, [‘$scope’, function($scope) {
$scope
.customer = {
name
: ‘Naomi’,
address
: ‘1600 Amphitheatre’
};
}])
.directive(‘myCustomer’, function() {
return {
restrict
: ‘E’,
templateUrl
: ‘my-customer.html’
};
});

index.html

<div ng-controller="Controller">
  <my-customer></my-customer>
</div>

my-customer.html

Name: {{customer.name}} Address: {{customer.address}}

More: https://docs.angularjs.org/guide/directive

Advertisements

One thought on “Angularjs – Directives

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s