CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
BT101
BT101

Reputation: 3826

Refer to HTML element from directive angularjs

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?

Upvotes: 0

Views: 30

Answers (1)

charlietfl
charlietfl

Reputation: 171679

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 
}

Upvotes: 1

Related Questions