-1

I´m trying to get a DOM element in order to change it inside a AngularJS1.0.6 directive.

HTML:

<li ng-repeat="car in cars" data-highlight="{{car.id}}">

Directive:

var iw = angular.element(document.querySelector('#iw-' + id));
console.log("iw=" + iw);

Please see the plunker for details: https://plnkr.co/edit/dP2cvut4f5ao5pFe6ka0?p=preview

Rober
  • 5,868
  • 17
  • 58
  • 110
  • 2
    Please be more specific what you need to accomplish. Not sure why you would need to use dom query approach – charlietfl Jan 15 '18 at 21:44
  • Ok, I just wanted to make it easy. What I need to do is to change the infowindow Google Maps background color with the user fires the event on mouseover the list of cars. – Rober Jan 15 '18 at 22:00
  • This makes sense, but just replacing the order of the boat-map and the list in the html does not work. Any idea how to do accomplish? – Rober Jan 15 '18 at 22:07

2 Answers2

1

After little research, I was able to make it work. Basically first issue comes when you use directive inside ng-repeat (also directive). In this case directive's scope must be set for example like: scope: {car: '=highlight'}. This can desribe what happens. I would rather use <ul highlight="cars"></ul> along with directive's template like '<ul><li ng-repeat="car in cars"></li></ul>'. So ng-repeat would be inside directive.

When you get through, another issue comes in form of syncing two directives (different scopes). You need DOM ready to select element from another directive. I saved your compliled element to car object - it can be count as workaround that make it easier.

Forked plunker here

bigless
  • 2,849
  • 19
  • 31
-1
<li ng-repeat="car in cars track by $index" data-highlight="{{car.$index}}">

or

if whatever property exists, in your case, car must have id property

Tino Costa 'El Nino'
  • 223
  • 4
  • 13