AngularJS – 10 Best Practices to Create Custom Directives

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