admin管理员组文章数量:1321602
I currently have an angular directive which works similar to a carousel. In order to keep the dom element count down, I remove elements from the dom and re-insert them. I'm currently making use of the angular.element
in order to select, delete and insert new items like so:
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);
}
}
});
Basically this code finds oldElement
and removes it and creates newElement
and appends it to the parent container element. Basically I want to know if its possible move oldElement
to a new location rather than deleting and creating a whole new element?
I currently have an angular directive which works similar to a carousel. In order to keep the dom element count down, I remove elements from the dom and re-insert them. I'm currently making use of the angular.element
in order to select, delete and insert new items like so:
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);
}
}
});
Basically this code finds oldElement
and removes it and creates newElement
and appends it to the parent container element. Basically I want to know if its possible move oldElement
to a new location rather than deleting and creating a whole new element?
-
what you mean move to a new location? if you do
append(oldElement)
for some other element - it moved – Grundy Commented Jul 24, 2015 at 6:52 - You can hide the old element with ´ng-hide´ in DOM. – mggSoft Commented Jul 24, 2015 at 6:58
- @Grundy thanks for the reply, I'll try it out – Matthew Merryfull Commented Jul 24, 2015 at 7:02
- @mggSoft Thanks for the suggestion, however, I'm not interested in hiding elements in place. If for instance, the carousel has 200+ items, I'm not going to hide 195 rendered items – Matthew Merryfull Commented Jul 24, 2015 at 7:04
-
Ok @MatthewMerryfull. You can use
ng-if
, which allows you remove or add the item to DOM. – mggSoft Commented Jul 24, 2015 at 7:09
1 Answer
Reset to default 6This is exactly how append works (Node.prototype.appendChild). It moves element to new location if it's already in DOM tree, or creates new element and inserts to DOM if it's not there yet.
In your case:
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);
}
}
});
or rather, because you don't need jQuery/jqLite) for such a simple DOM trick:
link: function(scope, elem){
var parentElement = elem[0].querySelector('.parent');
var oldElement = elem[0].querySelector('.oldItem');
parentElement.appendChild(oldElement);
}
本文标签: javascriptChange the location of a DOM element in AngularJSStack Overflow
版权声明:本文标题:javascript - Change the location of a DOM element in AngularJS - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742106680a2421050.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论