AngularJS Directives: 10 Things You Need to Know

AngularJS Directives: 10 Things You Need to Know

Here are a list of ten or more things which you need to know about AngularJS directives in order to get started creating your own directives and to utilize the true power of AngularJS.

1. You can make directives readonly

We can set @ for scope readonly value so that it can accept a string value instead of an object. This will be true or false to set the directive to be read only. Then the controller picks this up and disables the on click handlers for the directive.




controller.js (or directive.js link)

view demo

2. HTML5 Compliance

We will soon live in a world of HTML5. So make your directives and attributes HTML5 compliant. Prefix them with “data-” or “x-” so Angular will see it as a normal HTML5 element.

3. Controller Directive Hookup

I’ve also seen the controller being added to the element, which is probably if the elements controller changes?

This is redundant mostly as you can specify the controller in the directive.

4. Declaring Directives in HTML

When declaring the directive is in camelCase and when including in HTML template it’s in hyphen lowercase.




5. Built-in Directives

Learn the built in directives which Angular provides out of the box.

6. This directive requires a function!

As directives are meant to be shared across projects. The & value tells you that the directive requires a function handler for something. This is helpful to others who are using the directive and will spit out a nice error if you omit the function.



So in the example saveRatingToServer() is the function being passed to the directive which will handle it internally or via it’s controller.


view demo

7. Internet Explorer doesn’t like custom HTML elements.

Restrictions to custom directives declared as elements requires extra code to get it working with IE8+.


So it’s probably best to restrict your directives as attributes instead.

8. Syntax of directives

The tutorial of AngularJS writes directives like this: “ng-model”. But you can also write: “x-ng-model”, “ng:model”, “ng_model”, “data-ng-model”. They are all equivalent and work the same. I like to use the syntax with “data-” because it is standard-compliant.

9. Initializing your directives

There is a compile() function which can be used to specify any code to initialize your directive. On first compile Angular will run the compile function “one time” to initialize your directive with whatever code you have in the function. This is mostly useful if you cannot do the initialization inside your ngHTML template.

If the compile() function returns another function then this will be run “every time” the element is bound to data in the $scope object.

Things to note:

  • The element parameter is a jqLite wrapped jQuery DOM object.
  • The attributes parameter is a JS object which contains all of the properties of the element.

10. Multiple Restricts

Did you know you can set mutiple restricts to your Angularjs directives? You can set “A”, “E” or “AE” to allow both attributes and elements for your directive.

Like this:

I recommend however to choose just one (probably A for browser compatibility) and stick to that.

Sam is a passionate web developer from England. In his spare time he enjoys coding, playing chess, reading and investing.

Leave a Reply

Your email address will not be published. Required fields are marked *