1

Swiperというサードパーティのライブラリを使用しています。idangero.us.swiper.js は、「slide」要素が「wrapper」要素の直接の子になると想定しているため、DOM に残っている要素ディレクティブをうまく処理できないようです。

idangerous.swiper.js から:

for (var i = 0; i < _this.wrapper.childNodes.length; i++) {
    if (_this.wrapper.childNodes[i].className) {
        var _className = _this.wrapper.childNodes[i].className;
        var _slideClasses = _className.split(/\s+/);
        for (var j = 0; j < _slideClasses.length; j++) {
            if (_slideClasses[j] === params.slideClass) {
                _this.slides.push(_this.wrapper.childNodes[i]);
            }
        }
    }
}

有効なDOM:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            Slide 1
        </div>
        <div class="swiper-slide">
            Slide 2
        </div>
    </div>

無効な DOM:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <my-custom-slide>
            <div class="swiper-slide">
                Slide 1
            </div>
        </my-custom-slide>
        <my-custom-slide>
            <div class="swiper-slide">
                Slide 2
            </div>
        </my-custom-slide>
    </div>
</div>

ボイラー プレートを削減したり、一部の CSS を集中化したりするためのディレクティブを作成したいと考えていますmyCustomSlide。そのためには、ディレクティブ要素を DOM から除外して、実際の「swiper-slide」要素が_this.wrapper.childNodes. ディレクティブの置換機能を調べました。私の要件に完全に適合するようです。ただし、廃止されたようです。だから使いたくない。

置換 ([非推奨!]、次のメジャー リリースで削除されます - すなわち v2.0)

現在、優先順位を考えています。

  1. my-custom-slide ディレクティブを使用しない
  2. このユース ケースをサポートするために idangerous.swiper.js を強化するプル リクエストを送信する

DOM から my-custom-slide 要素を削除する非推奨の Angular の方法である 3 番目のオプションをお勧めします。これは存在しますか？存在しない場合、誰かが説明したり、置換機能が廃止された理由についてのドキュメントを教えてもらえますか?

4

1 に答える 1

1

replace正しく動作するためには、多くの簿記を行う必要があり、コーナーケースを考慮に入れる必要があるため、廃止されています。

特定のユースケースがあり (実際に行っているように)、カスタム スライドに特別な変更が加えられていないことがわかっている場合は、手動でテンプレートに置き換えることができます。（詳細がないと、これがあなたのケースに適しているかどうかはわかりません。）

別の解決策は、でディレクティブを定義することrestrict: 'A'です。

于 2014-10-04T07:19:20.693 に答える