How to Properly Manipulate DOM Elements in an Angular Directive

Question

How to Properly Manipulate DOM Elements in an Angular Directive

My directive, powerEntry, has different CSS classes that I want to add or remove based on the model state.

Currently, in my link function, I have some logic like this:

Script.JS

  if (calcState.availablePoints > 0 && isHighEnoughLevel) {
    levelUpBtnClass = 'enabled';
  } else if (calcState.availablePoints === 0 ) { // TODO: If ability is at cap, also disabled.
    levelUpBtnClass = 'disabled';
  }

  if (power.currentRank<=1) {
    powerRankClass = 'standard';
  } else {
    powerRankClass = 'enhanced';
  }

HTML

<img class="powerIcon" ng-src="/images/heroes/{{hero.name}}/powers/{{power.iconSrc}}">
<span class="powerRank" ng-class="powerRankClass">{{power.currentRank}}</span>
<div class="levelUpBtn" ng-class="levelUpBtnClass"></div>

While this setup works fine, I am unsure if it is the most optimal solution. It appears that ng-class can handle ternary operators, but including complex JavaScript expressions in my HTML doesn't feel right.

Is there a better approach for handling this? Are there any performance considerations between the different methods?

javascript angularjs dom angularjs-directive

Answer 1

Answer №1

To keep your HTML simple, my recommendation is to dynamically add classes through the linking function.

Within the linking function, you can manipulate elements like this:

function link(scope, element, attrs) {
    //...

    if (power.currentRank<=1) {
        element.addClass('basic');
    } else {
        element.addClass('upgraded');
    }

    //...
}

Answer 2

To keep your HTML simple, my recommendation is to dynamically add classes through the linking function.

Within the linking function, you can manipulate elements like this:

function link(scope, element, attrs) {
    //...

    if (power.currentRank<=1) {
        element.addClass('basic');
    } else {
        element.addClass('upgraded');
    }

    //...
}

Answer 3

Answer №2

Using ngClass is highly recommended in this scenario as it has the ability to handle expressions.

One way to implement this is by writing code similar to the following:

 ng-class="{enhanced: powerRankClass > 1, standard: powerRankClass == 1}"

If you create a jsfiddle, I can assist you with making it work seamlessly.

Answer 4

Using ngClass is highly recommended in this scenario as it has the ability to handle expressions.

One way to implement this is by writing code similar to the following:

 ng-class="{enhanced: powerRankClass > 1, standard: powerRankClass == 1}"

If you create a jsfiddle, I can assist you with making it work seamlessly.

How to Properly Manipulate DOM Elements in an Angular Directive

Answer №1

Answer №2

Similar questions

Loading the app.js file in Grails 3 from src/main/webapp folder

What is the best way to insert an HTML attribute into a dynamically generated build script within Angular?

Guide on using a pipe feature with varying arguments when the main function is called

How to address additional attributes received from the server in Next.JS

Tips for Deploying Your NuxtJS Project on a Shared Hosting Service

Variations in how words are organized within a sentence

The Click Event is failing to trigger for a dynamically created ID within a span element

Functions perfectly on Chrome, however, encountering issues on Internet Explorer

What is the reason for recursion not producing a new object as output?

The child component is experiencing issues with receiving props from the father component, even though it is functioning

Guide on invoking helper.js from nodeJs using angular controller

Angular allows you to easily upload multiple files at once

"Kindly complete all mandatory fields" - The undisclosed field is preventing me from submitting

Using Angular 6's httpClient to securely post data with credentials

Avoid accidental overwrites in localStorage using JavaScript

Personalize Dropdown Menu, determining when to initiate the hide menu action

Guide on transforming a select dropdown into a ul dropdown

The HTML slideshow is not automatically showing up as intended

Choose a collection of elements and encase them within a <div> tag

Adjust the viewport width based on the width of the device