Question

我目前有一个角度指令，其作用类似于旋转木马。为了保持dom元素倒数，我从dom中删除元素并重新插入它们。我目前正在使用angular.element来选择，删除和插入新项目，如下所示：

app.directive('myDirective', function(){
    return{
        link: function(scope, elem){
            var jqLite = angular.element;

            var parentElement = jqLite(elem[0].queryselector('.parent'));

            // Selection..
            var oldElement = jqLite(elem[0].queryselector('.oldItem'));
            var newElement = jqLite('<div class=".newItem">Content here</div>');

            oldElement.remove();

            parentElement.append(newElement);

        }
    }
});

此代码基本上找到oldElement并删除它并创建newElement并将其附加到父容器元素。基本上我想知道它是否可能移动 oldElement到一个新位置而不是删除并创建一个全新元素？

Answer 1

这正是append的工作原理（Node.prototype.appendChild）。如果它已经在DOM树中，它会将元素移动到新位置，或者如果它尚未存在则创建新元素并插入到DOM中。

在你的情况下：

app.directive('myDirective', function(){
    return{
        link: function(scope, elem) {
            var jqLite = angular.element;

            var parentElement = jqLite(elem[0].querySelector('.parent'));
            var oldElement = jqLite(elem[0].querySelector('.oldItem'));

            parentElement.append(oldElement);
        }
    }
});

或者更确切地说，因为你不需要jQuery / jqLite）这样一个简单的DOM技巧：

link: function(scope, elem){
    var parentElement = elem[0].querySelector('.parent');
    var oldElement = elem[0].querySelector('.oldItem');
    parentElement.appendChild(oldElement);
}

在AngularJS中更改DOM元素的位置

1 个答案: