Refer to HTML element from directive angularjs

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?

charlietfl · Accepted Answer · 2018-01-13 19:19:23Z

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 
}

answered Jan 13, 2018 at 19:19

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BT101 Over a year ago

but it's restrict: 'E', directive it's not called on some html element it's more like component: <horizontal-elements></horizontal-elements>.

charlietfl Over a year ago

doesn't make any difference. Th <horizontal-elements> element is still element in link arguments

BT101 Over a year ago

You could add that I can't use getElementById with el[0] only querySelector and querySelectorAll. :D But anyay this answer is efficient, thanks!

Collectives™ on Stack Overflow

Refer to HTML element from directive angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related