0

ディレクティブの要素で Swipe.js を初期化しようとしています。以前はこれが機能していましたが、ディレクティブを変更して、カルーセルの種類に基づいてテンプレートを動的にロードし、コンパイルしてからプラグインを初期化しています。これは私の指示です：

directive('carousel', ['$compile', '$http', '$templateCache', function($compile, $http, $templateCache) {
    var templateMap = { 
        default:    'default.html',
        products:   'partials/carousel/products.html'
    }, loader;

    return {
        restrict: 'E',
        replace: true,
        scope: {
            type: '@',
            slides: '=' 
        },  

        compile: function(tElement, tAttrs) {
            var template = templateMap[tAttrs.type];
            loader = $http.get(template, {cache: false}).success(function(html) {
                tElement.html(html);
            }); 

            return function(scope, element, attrs) {
                loader.then(function() {
                    scope.$watch('slides', function(slides) {
                        if(slides) {
                            console.log(element);
                            template = angular.element($compile(tElement.html())(scope));
                            element.replaceWith(template);
                            console.log(element);
                        }   
                    }); 
                }); 
            };  
        }   
    }   
}])

期待どおりに要素をログconsole.log(element)に記録すると。<carousel></carousel>を実行するreplaceWith()と、console.log(element)ロードされた新しい置換要素が表示されることを期待していますが、それでもカルーセル要素がログに記録されます。

期待どおりに交換していた場合はSwipe(element)、新しい要素で行いますが、明らかにそれは機能しません。

任意のヒント？

4

1 に答える 1

0

.replaceWith()は古い要素への参照を返します。これが、2 番目console.log()がまだ<carousel>. ドキュメントには次のように記載されています。

この.replaceWith()メソッドは、ほとんどの jQuery メソッドと同様に、jQuery オブジェクトを返すため、他のメソッドをそれに連鎖させることができます。ただし、元のjQuery オブジェクトが返されることに注意する必要があります。このオブジェクトは、それを置き換えた新しい要素ではなく、DOM から削除された要素を参照します。

これを回避する方法は、.replaceAll()ほとんど同じことを行う使用ですが、順序が逆です。問題を解決する新しい.replaceAll()DOM 要素への参照を返します。

ローダーのコールバックでこれを試してください:

if(slides) {
    console.log(element);
    template = angular.element($compile(tElement.html())(scope));
    element.after(template);

    console.log(element);

    new Swipe(element[0], { /* ... */ });
}

あなたが試すことができる別の方法（jqLit​​eがないため、and.replaceAll()を使用することです：.after().remove()

if(slides) {
    console.log(element);
    template = angular.element($compile(tElement.html())(scope));

    var oldElement = element;
    element = element.after(template);
    oldElement.remove();

    console.log(element);

    new Swipe(element[0], { /* ... */ });
}
于 2013-09-29T17:08:40.647 に答える