jquery - angular.element 与 document.getElementById 或带有旋转(忙碌)控制的 jQuery 选择器

Question

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

对于显示的解决方案，我不喜欢的一件事是在服务中使用 jQuery，它有效地将旋转控件附加到 DOM 元素。我更愿意使用 Angular 构造来访问元素。我还想避免“硬编码”微调器需要在服务中附加到的元素的 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 中，我想查看它，以便我可以对其进行测试并清除它。

感谢任何指点/答案。

谢谢。

Answer 1

它可以这样工作:

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

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

Official documentation for angular.element:

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angulars built-in subset of jQuery, that called "jQuery lite" or jqLite.

All element references in Angular are always wrapped with jQuery or jqLite (such as the element argument in a directives compile or link function). They are never raw DOM references.

如果您想知道为什么要使用 document.querySelector()，请阅读 this answer .