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

我使用的是Spin控件的“ Angularized”版本，如此处所述：http : //blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

我对所示解决方案不满意的一件事是在服务中使用jQuery，该服务有效地将旋转控件附加到DOM元素。我更喜欢使用角度构造来访问元素。我还想避免将微调器需要附加到服务内的元素的ID进行“硬编码”，而应使用在服务（单个）中设置ID的指令，以便该服务的其他用户或服务本身不需要知道这一点。

我在为angular.element给我们提供什么而在同一个元素id给我们提供了什么document.getElementById方面挣扎。例如。这有效：

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

这些都不做：

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

我显然正在做某事，应该是很明显的错误！有人可以帮忙吗？

假设我可以完成上述工作，那么尝试替换jQuery对元素的访问时也会遇到类似的问题：例如$(target).fadeIn('fast'); 有效 angular.element('#appBusyIndicator').fadeIn('fast')或angular.element('appBusyIndicator').fadeIn('fast')无效

有人可以给我指出一个很好的文档示例，该文档阐明了Angular“元素”和DOM元素的使用吗？Angular显然以其自身的属性，方法等“包装”了元素，但通常很难获得原始值。例如，如果我有一个<input type='number'>字段，并且当用户键入“-”（不带引号）时，我想访问ui中可见的原始内容，我什么也没得到，大概是因为“ type = number”表示Angular正在拒绝输入，即使它在UI中是可见的，我也想看到它，以便我可以对其进行测试并清除。

任何指针/答案表示赞赏。

谢谢。

它可以像这样工作：

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

您将本Document.querySelector()机Javascript调用包装到该angular.element()调用中。因此，您总是在jqLit​​e或jQuery对象中获取元素，具体取决于是否jQuery可用/加载。

官方文件angular.element：

如果jQuery可用，angular.element则为该jQuery函数的别名。如果jQuery不可用，则angular.element委托Angular的内置子集jQuery，该子集称为“ jQuery lite”或jqLit​​e。

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

如果您确实想知道为什么使用document.querySelector()，请阅读此答案。

如果尚未阅读angular 元素文档，则应该阅读它，这样您就可以了解jqLit​​e支持的内容以及-jqlite是内置在angular中的jquery的子集。

这些选择器不能单独与jqLit​​e一起使用，因为不支持ID的选择器。

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

因此，要么：

• 您单独使用jqLit​​e，比jquery限制更多，但在大多数情况下足够了。
• 或者您将完整的jQuery库包含在您的应用程序中，并像普通的jquery一样在您真正需要jquery的地方使用它。

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

真正的jQuery始终优先于jqLit​​e，前提是它是在DOMContentLoaded事件触发之前加载的。

Edit2：我之前错过了问题的第二部分：

的问题<input type="number">，我认为这不是一个有角度的问题，它是原生 html5数字元素的预期行为。

即使您尝试使用jquery .val()或raw .value属性检索它，它也不会返回非数字值。

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

等于

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

我认为这不是使用角度的正确方法。如果不存在框架方法，请不要创建它！这意味着框架（此处为角形）无法通过这种方式工作。

使用angular时，您不应像这样（jQuery方式）操作DOM，而应使用诸如

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

或创建自己的指令（您自己的DOM组件）以对其进行完全控制。

顺便说一句，您可以在此处看到http://caniuse.com/#search=queryselector querySelector受到很好的支持，因此可以安全使用。

如果有人正在使用gulp，则如果我们使用它会显示一个错误document.getElementById()，建议使用，$document.getElementById()但它不起作用。

用 -

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

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

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，并使用它代替原始文档对象。

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

如果不需要jQuery样式元素换行，则$ document [0] .querySelector（'＃MyID'）将为您提供DOM对象。

这对我很好。

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

改善kaiser的答案：

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

别忘了注入$document您的指令

也许我来不及在这里，但这可以工作：

var target = angular.element(appBusyIndicator);

注意，没有appBusyIndicator，它是纯ID值。

幕后发生的事情：（假设它应用在div上）（取自angular.js行号：2769起……）

/////////////////////////////////////////////
function JQLite(element) {     //element = div#appBusyIndicator
  if (element instanceof JQLite) {
    return element;
  }

  var argIsString;

  if (isString(element)) {
    element = trim(element);
    argIsString = true;
  }
  if (!(this instanceof JQLite)) {
    if (argIsString && element.charAt(0) != '<') {
      throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');
    }
    return new JQLite(element);
  }

默认情况下，如果页面上没有jQuery，将使用jqLit​​e。该参数在内部被理解为id，并返回相应的jQuery对象。