请参阅指令angularjs中的HTML元素

Question

I'm doing some DOM manipulation by adding function on click event inside my directive.

Basically it's animation of moving 4 little boxes to right and showing 4 "new" boxes sliding from left side. For real that's just 20 boxes in line with hidden overflow that you can see only 4 at time and on click it's just adding margin-left: -270px to pretend horizontal scrolling.

Currently I'm "catching" this 20 elements with

document.querySelectorAll(".last-added-element").forEach(function(elem) {

and this solution is working fine untill I use my directive twice at same page (same view). It's then scrolling boxes in both direcrives when I execute function.

Can I somehow scope above line ( querySelectorAll method) to get NodeList of results but only from its template no entire DOM?

Answer 1

link in directive exposes element the directive is called on so query from that element

link:function(scope, element, attrs){
   // element is a jQlite object
   element[0].querySelector('.someClass').doSomething 
}