Angular directives

Question

I'm studying the Angular library and have a simple (perhaps trivial) question about directives that might help me to place the term in proper context when reading general documentation:

When docs / tutorials refer to directives, do they refer to:

• The HTML (el, attr or class);
• The compiled HTML;
• The Javascript function that executes;
• The general concept of both working together;

Sometimes the context in which the term is used seems a bit blurry, probably because I'm still in study phase.

Answer 1

It is a feature of AngularJs to declare a directive . By declaring a directive you create something that allows you to extend HTML in various manners. So when people talk about directives they mean the whole thing which is is a pretty complex concept when you look at all details.

Mostly people talk about a " directive " when talking about the JavaScript function defining a directive , because this is how new directives get defined.

Most generally they do not talk about the compiled HTML in the DOM.

Answer 2

The definition of a directive stated by the Angular team is pretty clear.

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.

The context in which I use the term directive would be as follows:

I'm going to build a directive to lazy load images.

I have got an image:

 <img src="image.jpg"/>

Lets add a marker on the image element so the AngularJs framework knows we want to manipulate that html element, or the html within the element.

<img lazy-load src="image.jpg" />

To make sure the image.jpg does not get fetched yet before javascript kicks in, we just add a placeholder to the src and add a attribute on the element which will be available in the directive.

<img lazy-load src="placeholder.jpg" origin-src="image.jpg" />

Now lets build the actual directive within the AngularJs Framework.

app.directive('lazyLoad', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {

      var imagesrc = attrs.originSource;          
      // further logic to lazyload image
    }
  };

});

You can find many examples on Directives right here: https://docs.angularjs.org/guide/directive

Answer 3

Directive - I guess the terminology itself creates confusion to most of people. That's why angular people coming with 'Component' terminology with 2.0.

Directive is nothing but writing our own reusable custom tag and assigning some meaningfull functionality to it.

Lets say, we want to show an advertise panel over and over on all pages. It should depend on user history, preferences and also support lazy loading of images etc.

We can create a directive which will take image-name, preferece etc and will render it on its own.

We can create this as a reusable component and use it anywhere in the app by just including it in the html markup.

Answer 4

Directives are the central coding idea in Angular and the source of most of its power. They are an implementation of "Domain Specific Languages," which means that you, the programmer, get to make up your own language.

Although other comments here have focused on the HTML or the Javascript which defines the directive, neither of those is really the most important concept. The big takeaway is that writing a directive in your HTML results in both HTML and Javascript code (and likely Angular code, too) getting run. At the time a directive is defined, a template is indicated which tells which HTML will actually be output in place of the directive you wrote. But more importantly, a controller is also indicated which tells which code will be available for your HTML to access, including objects and functions.

ungallery.directive('footer', function() {
return {
    restrict: "E",
    controller: "footer",
    controllerAs: "footerController",
    templateUrl: 'directives/footer.html'
}
});

If this directive definition exists in my index.html (or any script loaded by it), then I can later write:

<footer></footer>

Into that index.html and have access to two things: the template that lives at "directives/footer.html" and a controller named "footer". Here's the definition of footerController . It exists only to give the HTML page visibility to the version number of the app, which I want to display in the footer of all pages:

var footerController = function() {
   this.version = CONSTANT.version;
};

ungallery.controller("footer", footerController);

The controller can assign any objects or functions to the object called this and those objects and functions will be available to the template HTML because of this directive wiring. This controller assigns one value to this , this.version , so that I can get to that value from my template.

In the directive's definition, the controllerAs syntax sets the name that I use to access the controller's this from the template. The reason that controllerAs syntax and separate names are used instead of just writing {{this.something}} is to prevent confusion when a page has several directives, each with its own meaning for this . In the definition of the footer controller, this is accessed with the prefix footerController . Here's what this looks like in the template HTML when I want to display the actual version number.

 <span>Version {{footerController.version}}.</span>

Hope that helps! Let me know if I need to expand upon or clarify any of this.

-- D