1

我将第 3 方指令包装为角度指令。让我们称之为<wrapper>。我必须。

在模板中，我有一个条件类<wrapper>，它看起来像这样：

<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.

更新（截至 1 月 17 日）

似乎我能够在简化的JSFiddle中重现该问题。

基本上，有一个指令（待包装），它不会替换其容器标签。比，有包装指令，它确实。

这就是我最终拥有[ {a} {b} ]AND[ a {b} ]类型的类列表的方式。

仍然想知道是否有可选的解决方案，或者我只是在这里做一些完全错误的事情。

4

0 回答 0