Issue with ng-class when wrapping an element as an angular directive

347 Views Asked by At

I'm wrapping a 3rd party directive as an angular directive. Let's call it <wrapper>. I must.

In the template, I have a conditional class on the <wrapper>, which looks something like this:

<div ng-class="{'conditional-class':conditionalClassBoolean}">
    <element-to-wrap
        ng-class="ngClass"
        other-attributes ... >
    </element-to-wrap>
</div>

The inner element has an ng-class attribute as well. It should receive its class from the wrapper's scope.

The directive looks something like this:

angular...directive('wrapper', function() {
    return {
        restrict: 'E',
        scope: {
            ng-class: '@'
        },
        ...
    };
});

This worked fine, until I introduced the conditional class to my template. It also works fine as long I do not pass in a class to the wrapper, so that is would be passed down to the inner element...

The following code works:

<wrapper ... ></wrapper>

The following code does not work:

<wrapper ng-class="apply-this-on-the-inner-element" ... ></wrapper>

I get the following error:

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at ...
of the expression [apply-this-on-the-inner-element {'conditional-class':conditionalClassBoolean}]

It seems like angular lists all the "classes" that had been passed in through ng-class, but this happens before it evaluates whether the conditional class should be applied or not. Is there a way to resolve this?

I tried to separate things with commas and semicolons as well. It did not get applied on the inner element. Only the error message went away.

UPDATE (as of 17th of January)

It seems like I was able to reproduce the issue in a simplified JSFiddle.

Basically, there is a directive (tobe wrapped), which does not replaces its container tags. Than, there is the wrapping directive, which does.

This is how I ended up having [ {a} {b} ] AND [ a {b} ] type of class-listings.

Still wondering wether there's an optional solution OR I'm just doing something totally wrong here.

0

There are 0 best solutions below