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

Question

我正在使用 Spin 控件的“Angularised”版本，如此处所述：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 中可见并且我想看到它，所以我可以测试它并清除它。

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

谢谢。

score 233 · Accepted Answer

它可以这样工作：

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

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

官方文档angular.element：

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

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

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

score 49 · Accepted Answer

如果您还没有阅读 angular element 文档，那么您应该阅读 angular element文档，这样您就可以了解 jqLite 支持的内容以及不支持的内容 -jqlite 是 angular 内置的 jquery 的子集。

这些选择器不能单独与 jqLite 一起使用，因为不支持按 id 的选择器。

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

所以，要么：

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

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

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

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

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

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

score 28 · Accepted Answer

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

等于

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

score 18 · Accepted Answer

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

利用 -

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

score 17 · Accepted Answer

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

使用 Angular，您不应该像这样操作 DOM（jquery 方式），而是使用 angular helper，例如

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

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

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

score 17 · Accepted Answer

您可以使用 $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');

score 10 · Accepted Answer

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

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

如果您不需要 jquery 样式元素包装， $document[0].querySelector('#MyID') 将为您提供 DOM 对象。

score 6 · Accepted Answer

这对我很有效。

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

score 4 · Accepted Answer

改进凯撒的答案：

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

不要忘记注入$document你的指令

score 3 · Accepted Answer

也许我来得太晚了，但这会起作用：

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，将使用 jqLite。该参数在内部被理解为一个 id 并返回相应的 jQuery 对象。

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

10 回答 10

Related

Reference