Over a million developers have joined DZone.

AngularJS - 10 Best Practices to Create Custom Directives

DZone's Guide to

AngularJS - 10 Best Practices to Create Custom Directives

This article represents top 10 best practices that one may want to apply while creating custom directives.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

This article represents top 10 best practices that one may want to apply while creating custom directives. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.

Following is listed the best practices for creating custom directives:

  1. Naming Convention: Prefer using two or three letter prefix (except ng) while naming directives to avoid collision with future HTML releases. Using “ng” as prefix might collide with AngularJS OOTB directives in future.
  2. Directive Definition Object (DDO): Prefer returning DDO rather than a function.
  3. TemplateUrl Usage: Prefer storing HTML template code in a seperate file and assign the path to templateUrl variable.
  4. Attribute vs Element: Whether to create custom directive as an attribute or an element is tricky. If the need is to create a component with core behavior and possibility to decorate the component with additional behavior in future, you would want to make the directive as element (E). However, if the need is to decorate existing element with some custom behavior, you could create dirrective of attribute (A) type.
  5. Isolate Scope: If the need is to reuse the component (directive) throughout your app, consider creating isolate scopes using scope option. The concept of isolate scope is used to separate the scope inside a directive from the scope outside.
  6. Clean-up function: Consider defining clean-up function by registering an event, element.on( ‘$destroy’, …). It is a good practice to remove event listeners once the ‘$destroy’ event is broadcasted, to avoid instances of memory leaks. Listeners registered to scopes and elements are automatically cleaned up when they are destroyed.
  7. Controller vs Link function: It is often confusing to beginners on when to use controller function and when to define link function within the custom directive. Thumb rule is use controller function when there is a need to expose APIs to other directives. In other cases, one could use link function.
  8. DOM Manipulation: Use the “link” option if there is a need to modify the DOM.
  9. Access to Outside Scope Object: If there is a need for directives’ content to access content from outer scope object (not defined within directive), one may want to use “transclude: true”.
  10. Usage of @attr, =attr, &attr:Following is details related with @attr, =attr and &attr:
    • @attr:@ binds a directive scope property to the evaluated value of the DOM attribute. If you use name=name1 or name=”name1″, the value of DOM attribute “name” is simply the string name1. If you use name=”{{name}}”, the value of the DOM attribute “name” is the interpolated value of {{name}}. Simply speaking, with @attr, one can bind a isolated scope property to a DOM attribute. This sets up a one-way databinding from the parent scope to the isolated scope. If the parent scope changes, the isolated scope will reflect that change, but not the other way around.
    • =attr:= binds a directive scope property to a parent scope property. So with =, you use the parent scope property name as the value of the DOM attribute. And if isolated scope property changes, then it will update the property that exists in parent scope.
    • &attr:The & symbol is used to to call an expression on the parent scope from the isolated scope.
    For detailed example, read the details on this page

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

java ,html5 ,javascript ,tips and tricks ,best practices ,angular.js

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}