在 AngularJS 指令中获取 DOM 元素答案

【问题标题】：Getting DOM element in AngularJS directive在 AngularJS 指令中获取 DOM 元素
【发布时间】：2018-01-15 21:29:18
【问题描述】：

我正在尝试获取一个 DOM 元素，以便在 AngularJS1.0.6 指令中更改它。

HTML：

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

指令：

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

详情请看plunker：https://plnkr.co/edit/dP2cvut4f5ao5pFe6ka0?p=preview

【问题讨论】：

请更具体地说明您需要完成的工作。不知道为什么需要使用 dom 查询方法
好的，我只是想让它变得简单。我需要做的是更改信息窗口谷歌地图的背景颜色，用户在鼠标悬停在汽车列表上时触发事件。
这是有道理的，但是仅仅替换船图的顺序和html中的列表是行不通的。知道如何完成吗？

标签： javascript jquery angularjs

【解决方案1】：

经过一番研究，我能够让它发挥作用。当您在 ng-repeat （也是指令）中使用指令时，基本上第一个问题就出现了。在这种情况下，必须设置指令的范围，例如：scope: {car: '=highlight'}。 This 可以描述发生了什么。我宁愿使用<ul highlight="cars"></ul> 和指令模板，如'<ul><li ng-repeat="car in cars"></li></ul>'。所以 ng-repeat 将在指令内部。

当您通过时，另一个问题是以同步两个指令（不同范围）的形式出现。您需要 DOM 准备好从另一个指令中选择元素。我将您编译的元素保存到汽车对象 - 它可以算作使其更容易的解决方法。

Forked plunker here

【讨论】：

你是个野兽！

【解决方案2】：

<li ng-repeat="car in cars track by $index" data-highlight="{{car.$index}}">

或

如果存在任何属性，在您的情况下，car 必须具有 id 属性

【讨论】：