DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • About Using Regexp in Nginx Map
  • Improving ui-select Control
  • 50+ Top Angular Interview Questions and Answers
  • Mule 4: Creating Global Custom Functions in Dataweave 2.0

Trending

  • Unleashing the Power of Microservices With Spring Cloud
  • Cognitive AI: The Road To AI That Thinks Like a Human Being
  • LLMs for Bad Content Detection: Pros and Cons
  • Choreography Pattern: Optimizing Communication in Distributed Systems

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.

Ajitesh Kumar user avatar by
Ajitesh Kumar
·
Sep. 25, 14 · Tutorial
Like (1)
Save
Tweet
Share
32.25K Views

Join the DZone community and get the full member experience.

Join For Free

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


Directive (programming)

Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • About Using Regexp in Nginx Map
  • Improving ui-select Control
  • 50+ Top Angular Interview Questions and Answers
  • Mule 4: Creating Global Custom Functions in Dataweave 2.0

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: