javascript - 在 AngularJS 中更改 DOM 元素的位置

Question

我目前有一个类似于旋转木马的 Angular Directive(指令)。为了减少 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/jqLit​​e)来实现这样一个简单的 DOM 技巧:

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