在AngularJS中更改DOM元素的位置

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

这正是追加工作的方式(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/jqLit​​e)这样一个简单的DOM技巧:

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