combine ngClass properties if substitution is true

Question

combine ngClass properties if substitution is true

My directive includes replace: true in the definition.

<my-custom-tag>
</my-custom-tag>

This is the template for the directive:

<div data-ng-class="{'class1': condition1, 'class2': condition2}">
</div>

When using my directive like this, it generates an error:

<my-custom-tag data-ng-class="{'class3': condition3}"></my-custom-tag>

The error occurs because the template already defines a data-ng-class attribute, resulting in the following HTML：

<div data-ng-class="{'class3': condition3} {'class1': condition1, 'class2': condition2}"></div>

Is there a way to merge these objects to avoid syntax errors during compilation?

Check out the Plunkr example, view the browser console for error messages, and inspect the element to examine the data-ng-class attribute.

javascript angularjs angularjs-directive

Answer 1

Answer №1

There was a discussion thread addressing this issue.

To address the problem, you can utilize the compile function to make modifications before the link function is activated. Check out this Plunkr example.

angular.module('directive', []).directive('myCustomTag', function() {
  return {
    template: "<div data-ng-class=\"{'foo': whenFoo()}\">My Custom Tag</div>",
    restrict: 'E',
    replace: true,
    compile: function compile(tElement, tAttrs) {

      tAttrs.ngClass = tAttrs.ngClass.replace(/}\s*{/g, ', ');

      return function (scope, iElement, iAttrs) {
        scope.whenFoo = function() {
          return true;
        };

      };
    }
  };
});

Answer 2

There was a discussion thread addressing this issue.

To address the problem, you can utilize the compile function to make modifications before the link function is activated. Check out this Plunkr example.

angular.module('directive', []).directive('myCustomTag', function() {
  return {
    template: "<div data-ng-class=\"{'foo': whenFoo()}\">My Custom Tag</div>",
    restrict: 'E',
    replace: true,
    compile: function compile(tElement, tAttrs) {

      tAttrs.ngClass = tAttrs.ngClass.replace(/}\s*{/g, ', ');

      return function (scope, iElement, iAttrs) {
        scope.whenFoo = function() {
          return true;
        };

      };
    }
  };
});

combine ngClass properties if substitution is true

Answer №1

Similar questions

Modifying the chart width in Chart.js: A step-by-step guide

Is it feasible to access a variable outside the scope of a function if it is initially created within the scope of another function that returns a function using that same variable?

What is the best way to combine API calls using rxJs subscribe and map in Angular?

Utilizing AngularJS for seamlessly closing Bootstrap Modal Popup

What is the correct way to add a library to webpack configuration?

Incorporating Images in AngularJS based on Boolean Values Retrieved from Model Database

The page is undergoing a refresh and the query will not be executed - Ajax and PHP working together

Sending arguments enclosed in double quotation marks

express-validator, no validation errors have been found so far

Access the contents of MUI Modal (Dialog) even when it's closed

Display the personalized list of user items on the MERN dashboard

Retrieve the decimal separator and other locale details from the $locale service

Is there a way to selectively add elements to the Promise.all() array based on certain conditions?

Does the react key have scope limited to the local environment or does it have

Unraveling the mysteries of the Bootstrap carousel script

How to use mousedown event in Three.js to create line drawings

Tips for eliminating repeated values in a textbox

The compilation of the Angular application is successful, however, errors are arising stating that the property does not exist with the 'ng build --prod' command

Try implementing Underscore/Lodash to organize an object by values and convert it into an array of pairs that can be utilized with AngularJS ng

Preventing users from inputting the symbols "+" or "-" in a React JS input field