Angularjs directives fundamentals

angularjs directives fundamentals angularjs directives tutorial basics of angularjs angularjs directives solution angularjs user controls angularjs for .net developers

In AngularJS Directives are html markers on a DOM element like an attribute, element name, comment or CSS class, that tell AngularJS's HTML compiler ($compile) to perform a specified behaviour to that DOM element or even transform the DOM element and its children.Some Example are ngBind, ngModel, and ngClass etc.

All the AngularJS pre-defined directives prefix with ng. AngularJS allow us to create our own directives as well, which we will learn in more detain in this article.

How directive matches: before we writing any custom directive we need to understand how Angular's compiler determines when to use a specific directive, let's understand it by some examples

<input ng-model="name">
<input data-ng-model="name">

<input> element matches the ngModel directive, in following example myCustomer directive is matched.

<my-customer></my-customer>

Since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

We can use x- and data- prefix to the element or attribute, we can also use `: (colon), - (dash) or _ (underscore)' for camelCase delimiter. We can use ngBind directive in following ways:

ng-bind='name' 
data-ng-bind='name' 
x-ng-bind='name' 
ng:bind='name' 
ng_bind='name' 

Most of the developer use dash format only, like ng-bind for ngBind, ng-model for ngModel, my-customer-detail for myCustomerDetail directives.

Directive Types: $compile can match directives based on element names, attributes, class names, and comments.

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

While creating a directive we can restrict to use only as an element, attribute, class or comment by using restrict keyword, even we can combine it to use in more than one form, say as element and attribute (AE) only. The restrict option can be any of these or combination of these, a directive is restricted to Attribute and Element (AE) by default:

  • 'A' - only matches attribute name
  • 'E' - only matches element name
  • 'C' - only matches class name
  • 'M' - only matches comment

Create Directive: Let's create our very first template expanding directive

angular.module('advanceDirectives', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {....};
}])
.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} Address: {{customer.address}} City: {{customer.city}}'
  };
});

How to use this directive in our HTML

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

Result will be like "Name: John Smith Address: 123 36 Street City: Manhattan"

In above example we use the html in directive itself. If we want to decorate our html more and keep in a separate file then we need to create a template like this

.directive('myCustomer', function() {
  return {
    restrict: 'AE',
    templateUrl: 'address.html'
  };
});

I also added restrict: 'AE', so this directive can only be use as attribute or element.

Here is the address.html to decorate the address:

<div><b>Name:</b> {{customer.name}}</div>
<div><b>Address:</b> {{customer.address}}</div>
<div><b>City:</b> {{customer.city}}</div>

Our page html will be same as previous.

Before starting the scope I want to see one more example which can show, how a directive can be re-used.

angular.module('advanceDirectives', [])
.controller('ControllerA', ['$scope', function($scope) {
  $scope.customer = {....};
}])
.controller('ControllerB', ['$scope', function($scope) {
  $scope.customer = {....};
}])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    templateUrl: 'address.html'
  };
});

Our page HTML will look like this

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

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

Of-course it is not a good practice to stick with scope on controller, if we can get a way to pass our data to directive to bind then ....

For now we learned the basic of directives, in our next article we will isolate the scope from controller and try to understand how can we pass the values to directive.

Ali Adravi Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
  • angularjs
  • directives
  • restrict
By Ali Adravi On 16 Mar, 16  Viewed: 538

Other blogs you may like

Angularjs powerful paging on table and searching with delay and demo

Paging on table is the basic requirement and most of us look for some grid so it can provide the complete feature of paging and sorting but in Angularjs it is so easy that anyone can achieve it by writing some code. I checked and found most of the available code give the paging feature in for 1 to... By Ali Adravi   On 14 Aug 2015  Viewed: 9,152

Angularjs Cascading Dropdown/Select with demo

Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change... By Ali Adravi   On 06 Aug 2015  Viewed: 36,920

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 2

Add/Edid Customer in Modal Popup --- In previous article we discussed how to search, delete and show detail of customer and contact list. In this article we will try to open the modal popup to add new customer and edit an existing customer record. I divided article in two parts because of the... By Ali Adravi   On 29 Jul 2015  Viewed: 14,128

Custom Directives in AngularJS with example and demo

Angularjs custom directives are the common to avoid the duplicate code, it is easy powerful and really nice. There are already too many directive have been created by experts but as a developer we need to write our own to achieve our specific goal. ng-model, ng-if, ng-show, ng-repeat all these are... By Ali Adravi   On 29 Jul 2015  Viewed: 2,842

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1

Search sort Insert update and delete are the basic features we need to learn first to learn any language, In this article we will try to create these features with Web API, bootstrap modal popup and ui.router. We will use enetity framework code first to save and retrieve data from database. We... By Ali Adravi   On 28 Jul 2015  Viewed: 25,003