Question

82

ng-class within custom directive not observing updates

rated 0 times [ 84] [ 2] / answers: 1 / hits: 8471 / 11 Years ago, sun, december 8, 2013, 12:00:00

I'm trying to create a directive that's used like this:

<amount value=myValue neg-class=negative />

myValue is a scope value (should be a number)
negative is simply the name of a css class.

The idea behind the directive is that I wan't to show currency to the user and when the amount that's bound is negative, negClass get's applied to the rendered element.

The problem I'm having is that when negClass is changed, the update doesn't take effect. I do see the changes in the DOM, though.

Here's my directive definition:

myModule.directive('amount', function () {

    return {

        restrict: 'E',

        replace: true,

        template: '<span ng-class={ {{negClass}}: value < 0 }>{{value | currency}}</span>',

        scope: {

            value: =,

            negClass: @,

        }



    };

});

Here's a test harness that demonstrates the problem: https://dl.dropboxusercontent.com/u/1563210/amtdirtest.html

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jabari

Add To Favorites

Follow

Total Points: 580

Total Questions: 85

Total Answers: 110

Location: Western Sahara

Member since Mon, May 3, 2021

3 Years ago

jabari questions

1 Type is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property

Tue, Mar 22, 22, 00:00, 2 Years ago

1 Get id using useParams hook in functional component - react router dom v6

Mon, Feb 7, 22, 00:00, 2 Years ago

1 How to properly use this jQuery script in my Next.Js app?

Fri, Jul 30, 21, 00:00, 3 Years ago

1 Webpack: Unknown property query?

Tue, May 4, 21, 00:00, 3 Years ago

1 JS Decrypt Laravel Encrypted String

Fri, Jul 24, 20, 00:00, 4 Years ago

View All

answered 11 Years ago kalynnkathrynd · Accepted Answer

Most of the angular directives tend to work in this way. Unless the docs specifically mention supporting interpolation ({{...}}) for inputs then it's safer to not rely on it, especially where the input is an = rather than an @ binding.

In the case of ngClass, the attribute works like a = binding, and there is no mention of interpolation.

What actually happens in the directive is that the attribute is only observed in the linking phase and the the actual text in the attribute is never looked at again. So while the attribute continues to change, the changes are never seen.

By the time the attribute is seen by ngClass, it looks something like

{ n: value < 0 }

which is still evaluated based on whatever the current value is in scope, but the expression itself never gets changed again.

The safe way to do what you are trying would be to create an object without using interpolation, or to just have a function that returns which class is active...Something like the following should work:

myModule.directive('amount', function () {

    return {

        restrict: 'E',

        replace: true,

        template: '<span ng-class=getActiveClass()>{{value | currency}}</span>',

        scope: {

            value: =,

            negClass: @,

        },

        link: function(scope, element, attrs) {

            scope.getActiveClass = function() {

                if(scope.value < 0)

                    return scope.negClass;

            }

        }



    };

});