1

サードパーティのディレクティブを角度ディレクティブとしてラップしています。と呼びましょう<wrapper>。私はしなければならない。

テンプレートには、<wrapper>次のような条件付きクラスがあります。

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

内部要素にもng-class属性があります。ラッパーのスコープからクラスを受け取る必要があります。

ディレクティブは次のようになります。

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

テンプレートに条件付きクラスを導入するまで、これはうまくいきました。クラスをラッパーに渡さない限り、それもうまく機能するので、それは内部要素に渡されます...

次のコードが機能します。

<wrapper ... ></wrapper>

次のコードは機能しません。

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

次のエラーが表示されます。

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

angular が渡されたすべての「クラス」をリストしているように見えますng-classが、これは、条件付きクラスを適用するかどうかを評価する前に発生します。これを解決する方法はありますか?

コンマとセミコロンでも区切ろうとしました。内部要素には適用されませんでした。エラーメッセージだけが消えました。

更新(1 月 17 日現在)

単純化されたJSFiddleで問題を再現できたようです。

基本的に、コンテナー タグを置き換えないディレクティブ (tobe ラップ) があります。それよりも、ラッピング ディレクティブがあります。

これが、[ {a} {b} ]AND[ a {b} ]タイプのクラスリストを持つことになった方法です。

オプションの解決策があるのか​​ 、それともここで完全に間違ったことをしているだけなのか、まだ疑問に思っています。

4

0 に答える 0