javascript - Ändra platsen på ett DOM-element i AngularJS

Jag har för närvarande en Angular-direktiv som fungerar på liknande sätt som en karusell. För att hålla antalet DOM-element nere tar jag bort element från DOM och återinfogar dem. Jag använder för närvarande angular.element för att välja, ta bort och infoga nya objekt på följande sätt:

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);

        }
    }
});

I princip hittar den här koden oldElement och tar bort det och skapar newElement och lägger till det i föräldrakontainerelementet. I princip vill jag veta om det är möjligt att flytta oldElement till en ny plats istället för att ta bort och skapa ett helt nytt element?

Svar #1

Detta är exakt hur append fungerar (Node.prototype.appendChild). Det flyttar elementet till en ny plats om det redan finns i DOM-trädet, eller skapar ett nytt element och infogar det i DOM om det ännu inte finns där.

I ditt fall:

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);
        }
    }
});

eller snarare, eftersom du inte behöver jQuery/jqLite) för ett så enkelt DOM-trick:

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