AngularJS: 如何通过id获取DOM元素

Question

示例

请参考此Plunkr。

我的需求

我需要能够按其id获取元素。

示例代码应该能够为当前视图中存在的任何DOM元素分配一个CSS类。

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

因此，我想循环遍历每个对象键并查看是否存在相应的DOM元素。如果是，则验证其值。

问题

如何仅使用AngularJS按id获取元素（不允许使用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;
};

And this one (basically the same):

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

  // Sample only
  return null;
}

更新

抱歉，我忘记了一个重要的要求：我不能使用任何假定唯一标识符的机制，因为可能会出现相同表单（和相同ID）的多个实例。因此，我需要尊重Angular作用域。

谢谢！

- Spikee

---

你想要实现什么？只是将一个类分配给元素吗？ - Ajinder Singh

如果你需要在工厂或控制器中使用DOM操作，我认为你做错了什么。如果我有jQuery背景，可以尝试查看“在AngularJS中思考”的文章。 (https://dev59.com/YGUp5IYBdhLWcg3w3KXe?rq=1) - Grundy

就像@Grundy所说，这不是Angular的做事方式。考虑使用控制器、指令进行DOM操作。 - Ajinder Singh

@Spikee 考虑使用 ng-class 为元素条件性地分配类。请查看 https://docs.angularjs.org/api/ng/directive/ngClass - Ajinder Singh

@Spikee - 你可以将条件逻辑移到服务中，并通过指令操作元素。 - Ajinder Singh

Answer 1

在纯JS中，您可以使用 document.querySelector('#myID'); 来实现。

或者在Angular中使用angular.element: angular.element(document.querySelector('#myID'));

- Lauromine

---

根据您想要支持的浏览器，最好使用document.getElementById()。querySelector仅在现代浏览器中受支持。 - Daniele Torino

很遗憾，这样做不起作用，因为可能会有多个相同表单（和相同的ID），所以我需要保持在（Angular）范围内。 - Spikee

ID 应该是唯一的。http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#the-id-attribute - Lauromine

就像我说的那样，没有办法保证它，而提供一个强制唯一ID的机制会使状态管理变得非常困难，考虑到其复杂性。 - Spikee

实际上，我找到了一个可能可行的解决方案：链接。 - Spikee

如果您的ID不是唯一的，那么您的DOM就无效了，浏览器可能会以不可预测的方式做出反应。在解决这个问题之前，请先修复它。 - Mawg says reinstate Monica

Answer 2

尝试使用 angular.element($('#myElement')); 替代。

- Nishith Kant Chaturvedi

---

$('#myElement') 这部分意味着你正在使用jQuery，对吧？不幸的是，这不是一个选项，因为我无法保证在视图上ID是唯一的。 - Spikee

老问题虽然老，但为了清晰起见，angular.element()是AngularJS的一个方法，而不是jQuery。在幕后，angular.element()实际上是jqLite。然而，如果在AngularJS之前加载了jQuery，它将用jQuery替换jqLite实现...使得angular.element()在Angular的内部等同于jQuery的$()。 - Cliff Armstrong

所有这些都说了，无法保证唯一ID代表着一个有缺陷的设计。而且使用angular.element()同样可能因为多个ID而失败，因为它不仅限于当前的angular范围，而是像本地js方法一样。 - Cliff Armstrong