3

私がやろうとしているのは、ng-repeat ディレクティブを使用して角度を付けてカルーセルの構造を構築し、それをフクロウのカルーセル jquery プラグインにフィードすることです。トリックの一部は、このカルーセルがビュー (ngView) で入ってくることです。

残念ながら、これはそれほど単純ではないようです。

これまでに検討したオプションは次のとおりです。

  1. $viewContentLoadedイベント。これは機能せず、明らかに嫌われています (コントローラーからの DOM 操作に相当するため)。
  2. カルーセル プラグインを初期化するために、ビュー ページの下部にいくつかのスクリプトを含めるだけです。これは静的コンテンツでは機能しますが、ng-repeat を介して追加されたコンテンツでは機能しません
  3. カスタム ディレクティブの追加。わかりました、これは機能しますが、それは自分でフリップペン全体のカルーセルを構築する必要があることを意味しているようです. jQuery.append() などの便利な使い方。このコードは以下のとおりです。

基本的に私の質問はこれです:これを行うための他の/より良い方法はありますか(無限ループとHTML文字列連結とは対照的に)?

構築する必要がある実際のカルーセル アイテムは、以下のサンプルよりもはるかに複雑であることに注意してください。

さて、いくつかのコード：

まず、関連するビューからの HTML スニペット:

<div class="owl-carousel owl-theme daCarousel" da-carousel="">
</div>

次に、ディレクティブ構成:

app.directive('daCarousel',function () {
    var makeItLive = function (scope, element, attrs)
    {
        //TODO feed in real data here
        for (var i = 0; i < 10; i++) {                  
            $(element).append ('<div class="item">Item ' + i + '</div>');
        }

        $(element).owlCarousel({
            navigation : true, // Show next and prev buttons
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem:true                     

        });
};

編集

わかりました、その間に私は$templateCacheサービスを発見しました。

本質的に、スクリプトタグでテンプレートを定義します（私のものは実際には関連するビューにあります）：

<script type="text/ng-template" id="specialsTemplate.html">
//HTML with AngularJS bindings etc here
</script>

これは、次のようにディレクティブで取得できます。

var tpl = $templateCache.get('specialsTemplate.html')   ;   
var compiled = $compile(tpl)(scope);
element.html (compiled);

魔法の最後のビットとして、オークフィッシュの提案を使用して$timeout：

$timeout (
            function () {
                $('#correctIdForYourCarouselElement').owlCarousel({

                    navigation : false, // Show next and prev buttons
                    slideSpeed : 300,
                    paginationSpeed : 400,
                    singleItem:true

                    // "singleItem:true" is a shortcut for:
                    // items : 1, 
                    // itemsDesktop : false,
                    // itemsDesktopSmall : false,
                    // itemsTablet: false,
                    // itemsMobile : false

                });
            },
            50
        );
4

1 に答える 1