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(), thenconsole.log(element)时，我希望它显示已加载的新替换元素，但它仍会记录轮播元素。

如果它像我期望的那样被替换，我会Swipe(element)在新元素上做，但显然那是行不通的。

有小费吗？

4

1 回答 1

0

.replaceWith()将返回对旧元素的引用，这就是为什么您的第二个console.log()仍在打印<carousel>. 该文件指出：

与大多数 jQuery 方法一样，该.replaceWith()方法返回 jQuery 对象，以便其他方法可以链接到它上面。但是，必须注意返回的是原始jQuery 对象。此对象指的是已从 DOM 中删除的元素，而不是替换它的新元素。

解决这个问题的方法是使用.replaceAll()which 在很大程度上做同样的事情，但顺序相反。.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 没有.replaceAll()使用.after()and .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 回答