AngularJS：如何通过 id 获取 DOM 元素答案

【问题标题】：AngularJS: How to get a DOM element by idAngularJS：如何通过 id 获取 DOM 元素
【发布时间】：2015-12-05 05:59:45
【问题描述】：

示例

请考虑Plunkr。

我需要什么

我需要能够通过它的 id 获取一个元素。

示例代码应该能够将 css 类分配给当前视图中存在的任何 DOM 元素。

这应该使用控制器中的 $scope 提供的源对象进行检查。此源对象可能/将具有比视图上的输入元素更多的属性。

所以我想遍历每个对象键，看看是否存在对应的 DOM 元素。如果是这样，请验证它的价值。

问题

如何通过 id 获取元素，仅使用 AngularJS（不允许使用 jQuery！）？

特别是对于 Plunkr，我需要这个功能才能（真正）工作：

self.IsFieldCurrentlyActive = function(field){
  // Should be (in pseudocode):
  // var inputElement = angular.find(field);
  // return (inputElement != 'undefined');

  // Sample only
  var idx = field.indexOf('Unused');
  return idx == -1;
};

还有这个（基本一样）：

self.GetElementByKey = function(key)
{
  // Should be (in pseudocode):
  // var inputElement = angular.find(field);
  // return inputElement;

  // Sample only
  return null;
}

更新

抱歉，我忘记添加一个重要要求：我不能使用任何假定唯一 ID 的机制，因为可能会多次出现相同的表单（以及相同的 ID）。所以，我需要尊重 Angular 范围。

谢谢！

【问题讨论】：

你想达到什么目的？只需为元素分配一个类？
如果您需要在工厂或控制器中使用 dom 操作，我认为您做错了，请尝试查看 “Thinking in AngularJS” if I have a jQuery background?
正如@Grundy 所说，这不是有角度的做事方式。考虑控制器，DOM 操作的指令。
@Spikee 考虑使用 ng-class 有条件地将类分配给元素。检查docs.angularjs.org/api/ng/directive/ngClass
@Spikee - 您可以通过指令移动条件逻辑以服务和操作元素

标签： javascript css angularjs dom

【解决方案1】：

试试angular.element($('#myElement'));

【讨论】：

$('#myElement') 部分意味着您使用的是 jQuery，对吗？遗憾的是，这不是一个选项，因为我不能保证 ID 在视图中是唯一的。
老问题是老问题，但为了清楚起见，angular.element() 是一个 AngularJS 方法，而不是 jQuery。在引擎盖下 angular.element() 实际上是 jqLite。但是，如果在 AngularJS 之前加载 jQuery，它将用 jQuery 替换 jqLite 实现......使得 angular.element() 等效于 Angular 引擎下的 jQuery 的 $()。
说了这么多，不能保证唯一的 ID 代表了一个有缺陷的设计。并且使用 angular.element() 很可能由于多个 ID 而失败，因为它不再局限于当前的角度范围而不是原生 js 方法。

【解决方案2】：

在纯 JS 你可以做document.querySelector('#myID');

或在角度内使用 angular.element： angular.element(document.querySelector('#myID'));

【讨论】：

根据您想要支持的浏览器，最好使用document.getElementById()。 querySelector 仅在现代浏览器中受支持。
遗憾的是，这不起作用，因为可能会多次出现相同的表单（和相同的 id），所以我需要留在（Angular）范围内。
一个 ID 应该是唯一的。 w3.org/TR/2014/REC-html5-20141028/dom.html#the-id-attribute
就像我说的，没有办法保证它，考虑到复杂性，提供一种强制唯一 ID 的机制会使状态管理变得非常困难。
如果您的 ID 不是唯一的，则您的 DOM 无效，浏览器可能会以不可预知的方式做出反应。在解决这个问题之前先解决这个问题。