angular.element vs document.getElementById或带有旋转（忙）控件的jQuery选择器

我使用的是旋转控制的“角度化”版本，如下所述：

关于所展示的解决方案，我不喜欢的一点是在服务中使用jQuery，它有效地将spin控件附加到DOM元素。我更喜欢使用角度构造来访问元素。我还希望避免“硬编码”微调器需要附加到服务中的元素的id，而是使用一个在服务中设置id的指令（singleton），这样服务的其他用户或服务本身就不需要知道这一点

我正在努力解决angular.element提供给我们的内容与同一元素id上的document.getElementById提供给我们的内容之间的矛盾。 这项工作：

  var target = document.getElementById('appBusyIndicator');

这些都不能：

  var target = angular.element('#appBusyIndicator');
  var target = angular.element('appBusyIndicator');

很明显，我在做一些应该是相当明显错误的事情！有人能帮忙吗

假设我可以实现上述功能，那么我在尝试替换对元素的jQuery访问时也会遇到类似的问题： 例如

$（目标）.fadeIn（'fast'）工作
angular.element（'appBusyIndicator'）.fadeIn（'fast'）
或
angular.element（'appBusyIndicator'）.fadeIn（'fast'）
不

有人能给我举一个很好的文档示例，说明角度“元素”与DOM元素的用法吗？很明显，Angular用它自己的属性、方法等“包装”元素，但通常很难获得原始值。例如，如果我有一个
字段，当用户键入“-”（不带引号）时，我想访问在ui中可见的原始内容，我什么也得不到，大概是因为“type=number”意味着Angular拒绝输入，即使它在ui中可见，我想看到它，这样我就可以测试并清除它

如有任何提示/答案，不胜感激

谢谢。
如果您还没有阅读angular文档，那么您应该阅读angular文档，以便了解jqLite支持什么和不支持什么-jqLite是angular中内置的jquery的子集

那些选择器不能单独与jqLite一起工作，因为不支持id选择器

var target=angular.element（'appBusyIndicator'）；
var target=angular.element（'appBusyIndicator'）；

因此，要么：


您单独使用jqLite，比jquery更为有限，但在大多数情况下已经足够了
或者在应用程序中包含完整的jQuery库，并在真正需要jQuery的地方像普通jQuery一样使用它

编辑：请注意，jQuery应在angularJS之前加载，以便优先于jqLite：

真正的jQuery总是优先于jqLite，只要它是
在触发DOMContentLoaded事件之前加载

编辑2：我之前错过了问题的第二部分：

关于
的问题，我认为这不是一个角度的问题，而是原生html5数字元素的预期行为

即使您尝试使用jquery的
.val（）
或原始
.value
属性检索非数值，它也不会返回非数值。
它可以这样工作：

var myElement = angular.element( document.querySelector( '#some-id' ) );

将调用包装到
angular.element（）
调用中。因此，您总是在jqLite或jQuery对象中获取元素，这取决于
jQuery
是否可用/加载


如果jQuery可用，
angular.element
是
jQuery
函数的别名。如果jQuery不可用，
angular.element
将委托给
jQuery
的angular内置子集，该子集称为“jQuery lite”或jqLite

Angular
中的所有元素引用始终使用jQuery或
jqLite
进行包装（例如指令编译或链接函数中的元素参数）。它们从来都不是原始的
DOM
引用

如果您确实想知道为什么要使用
document.querySelector（）
，请阅读。
我认为这不是正确的使用方法。如果框架方法不存在，不要创建它！这意味着框架（此处为角度）不以这种方式工作

对于angular，您不应该像这样操作DOM（jquery方式），而是使用angular助手，例如

<div ng-show="isLoading" class="loader"></div>



或者创建您自己的指令（您自己的DOM组件），以便完全控制它

顺便说一句，您可以在这里看到querySelector得到了很好的支持，因此可以安全使用。
对kaiser答案的改进：

var myEl = $document.find('#some-id');

别忘了在指令中插入
$document
，这对我很有效

angular.forEach(element.find('div'), function(node)
{
  if(node.id == 'someid'){
    //do something
  }
  if(node.className == 'someclass'){
    //do something
  }
});

您应该在控制器中注入$document，并使用它而不是原始文档对象

var myElement = angular.element($document[0].querySelector('#MyID'))

如果您不需要jquery样式的元素wrap，$document[0]。querySelector（“#MyID”）将为您提供DOM对象。
也许我在这里太迟了，但这会起作用：

var target = angular.element(appBusyIndicator);

注意，没有
appBusyIndicator
，它是普通的ID值

幕后发生的事情：（假设它应用于div）
（取自angular.js第2769行之后…）

/////////////////////////////////////////////
函数JQLite（element）{//element=div#appBusyIndicator
if（JQLite的元素实例）{
返回元素；
}
变量argIsString；
if（isString（元素））{
元素=修剪（元素）；
argIsString=true；
}
if（！（此实例为JQLite））{
if（argIsString&&element.charAt（0）！='
等于

var target = $document[0].getElementById('appBusyIndicator');

您可以使用$document访问元素（$document需要注入）

或者使用角度元素，可以通过以下方式访问指定元素：

var targets = angular.element(document).find('div'); //array of all div
var targets = angular.element(document).find('p');
var target = angular.element(document).find('#appBusyIndicator');

如果有人使用gulp，那么如果我们使用
document.getElementById（）
，它会显示一个错误，并建议使用
$document.getElementById（）
，但它不起作用

使用-

$document[0].getElementById('id')

如果您正在加载jQuery，那么angular.element是一个jQlite对象或jQuery对象$
var target = $document('#appBusyIndicator');
var target = $document('appBusyIndicator');

var targets = angular.element(document).find('div'); //array of all div
var targets = angular.element(document).find('p');
var target = angular.element(document).find('#appBusyIndicator');

$document[0].getElementById('id')