Creating Angular directives: dynamically applying ng-class directive to template elements during compilation

Question

Creating Angular directives: dynamically applying ng-class directive to template elements during compilation

In short, the aim is to streamline templating by avoiding manual addition of

ng-class={'has-error': 'formName.inputName.$invalid'}

for every individual form-group

The idea is to develop a directive that will automatically generate a string to append to a template element. This string will be an ng-class attribute with an expression.

Initially, I believed that creating a simple directive during the compile phase to insert the ng-class attribute would suffice, but it appears insufficient.

Definition Object for Directive

{
    restrict: 'C',
    compile: function(tElement, tAttrs) {
        var $elem = angular.element(tElement),
            formName = $elem.parents('[ng-form]').length ? $elem.parents('[ng-form]').attr('ng-form') : $elem.parents('form').attr('name'),
            controlName = $elem.find('.form-control').attr('name');

        $elem.attr('ng-class', '{"has-error": ' + formName + '.' + controlName + '.$invalid}');

        console.log('added ng-class attr', $elem.attr('ng-class'));
    }
}

Check out the Plunk here

Take a look at the console output

The first form-group has the dynamic addition of its ng-class attribute.
The associated expression is correct
However, the execution of the ng-class directive never occurs

The second form-group manually adds its ng-class attribute in the template and functions as expected.

--

What could be the missing piece here?

javascript angularjs angularjs-directive

Answer 1

Answer №1

Successfully achieved the desired outcome without increasing additional watchers (although ng-class utilizes a watcher, the proposed solution led to a surge in watchers count during testing)

In order to avoid recursion when $compiling the new DOM element in postLink, I had to remove the directive itself. Consequently, this restriction prevents me from reusing a class-name like "form-group"

Below is the Directive that is currently functioning

function bsFormClass($compile) {
  return {
    restrict: 'A',

    compile: function (tElement) {

        var $elem = angular.element(tElement),
            controlName = $elem.find('.form-control').attr('name');

        if(!controlName) { return; }

        var formName = $elem.parents('[ng-form]').length ? $elem.parents('[ng-form]').attr('ng-form') : $elem.parents('form').attr('name');

        $elem.attr('ng-class', '{"has-error": ' + formName + '.' + controlName + '.$invalid}');
        $elem.removeAttr('bs-form-class');

        return {
            post: function(scope, elem, attrs) {
                $compile(elem)(scope);
            }
        }
    }
  }
}

Many thanks for your assistance

Answer 2

Successfully achieved the desired outcome without increasing additional watchers (although ng-class utilizes a watcher, the proposed solution led to a surge in watchers count during testing)

In order to avoid recursion when $compiling the new DOM element in postLink, I had to remove the directive itself. Consequently, this restriction prevents me from reusing a class-name like "form-group"

Below is the Directive that is currently functioning

function bsFormClass($compile) {
  return {
    restrict: 'A',

    compile: function (tElement) {

        var $elem = angular.element(tElement),
            controlName = $elem.find('.form-control').attr('name');

        if(!controlName) { return; }

        var formName = $elem.parents('[ng-form]').length ? $elem.parents('[ng-form]').attr('ng-form') : $elem.parents('form').attr('name');

        $elem.attr('ng-class', '{"has-error": ' + formName + '.' + controlName + '.$invalid}');
        $elem.removeAttr('bs-form-class');

        return {
            post: function(scope, elem, attrs) {
                $compile(elem)(scope);
            }
        }
    }
  }
}

Many thanks for your assistance

Answer 3

Answer №2

It is not possible to include directives in the current element!

To resolve this issue, simply monitor the relevant expressions and apply the class when needed:

function updateClassBasedOnFormValidity () {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            var formName = elem.parents('[ng-form]').length ? elem.parents('[ng-form]').attr('ng-form') : elem.parents('form').attr('name'),
                controlName = elem.find('.form-control').attr('name');

            scope.$watch(formName + '.' + controlName + '.$invalid', function(newval) {
              elem.toggleClass('has-error', !!newval);
            });
        }
    };
}

The ng-class directive will handle the monitoring process. Check out the altered plunk here: http://plnkr.co/edit/aBc9YRTgP4C7LmNhOJKU?p=preview

Answer 4

It is not possible to include directives in the current element!

To resolve this issue, simply monitor the relevant expressions and apply the class when needed:

function updateClassBasedOnFormValidity () {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            var formName = elem.parents('[ng-form]').length ? elem.parents('[ng-form]').attr('ng-form') : elem.parents('form').attr('name'),
                controlName = elem.find('.form-control').attr('name');

            scope.$watch(formName + '.' + controlName + '.$invalid', function(newval) {
              elem.toggleClass('has-error', !!newval);
            });
        }
    };
}

The ng-class directive will handle the monitoring process. Check out the altered plunk here: http://plnkr.co/edit/aBc9YRTgP4C7LmNhOJKU?p=preview

Creating Angular directives: dynamically applying ng-class directive to template elements during compilation

Definition Object for Directive

Check out the Plunk here

Answer №1

Answer №2

Similar questions

Efficiently incorporating multiple properties into one in Angular

Having trouble toggling journal entries in an HTML journal? The Jquery function might not be working properly

Combining Parallel Axios GET Requests Using the Promise.allSettled Method Along With Source Objects

What is the reason behind certain vanilla JavaScript libraries necessitating NPM?

Guide to retrieving objects in React.js

Effortless Like/Unlike feature with a text button option enhanced with ajax functionality and

What is the best way to use multiple encoding types when sending data via a POST method in Node.js?

Updating a <div> using Ajax while also transmitting a counter variable

Adjust the width of columns in a C# GridView

Getting started with Tween JS on a three-dimensional cube in Three JS

Convert checkbox choices to strings stored in an array within an object

Experiencing difficulties integrating relational data with Angular and MongoDB

Unfortunately, the isoWeek function in moment.js is not functioning correctly on our Heroku instance

Loading page with asynchronous JavaScript requests

Executing two SQL queries simultaneously in NodeJS can be achieved by using a single statement

Creating a Next.js dynamic route that takes in a user-submitted URL for customization

Understanding the "this" keyword in React.js is crucial for

There seems to be an issue with the Axios Post not consistently finishing each time

How can I add scrolling functionality to the active list item with React?

ERROR: mammoth has not been declared