Question

我正在使用Spin控件的“Angularised”版本，如下所示：http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

我不喜欢所显示的解决方案之一是在服务中使用jQuery，有效地将旋转控件附加到DOM元素。我更喜欢使用角度构造来访问元素。我还想避免“硬编码”spinner需要附加到服务中的元素的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()电话中。因此，您始终可以在 jqLite 或 jQuery 对象中获取该元素，具体取决于jQuery是否可用/已加载。

Official documentation for angular.element:

如果 jQuery 可用，则angular.element是jQuery功能的别名。如果jQuery不可用，angular.element会委托 Angular 的内置jQuery子集，称为“jQuery lite”或 jqLite 。 / p>
Angular中的所有元素引用始终包含在 jQuery 或jqLite中（例如，指令编译或链接函数中的元素参数）。它们永远不是原始DOM引用。

如果您想知道使用document.querySelector()的原因，请阅读this answer。

Answer 2

如果还没有，你应该阅读有角度的element文档，这样你就可以理解jqLite支持什么了，而且-jqlite是构建为angular的jquery的子集。

那些选择器无法单独使用 ，因为不支持选择器 ID。

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

所以，要么：

你单独使用jqLite，比jquery更有限，但在大多数情况下都足够了。
或者在你的应用程序中包含完整的jQuery lib，并在正常需要jquery的地方使用它，就像普通的jquery一样。

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

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

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

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

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

Answer 3

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

等于

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

Answer 4

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

使用angular你不应该像这样操纵DOM（jquery方式），但是使用角度助手，比如

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

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

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

Answer 5

您可以使用$ document（$ document需要注入）

来访问元素

var target = $document('#appBusyIndicator');
var target = $document('appBusyIndicator');

或使用angular元素，可以将指定的元素访问为：

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');

Answer 6

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

使用 -

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

Answer 7

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

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

如果你不需要jquery样式元素换行，$ document [0] .querySelector（＆＃39;＃MyID＆＃39;）将为你提供DOM对象。

Answer 8

这对我很有用。

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

Answer 9

改善kaiser的答案：

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

不要忘记将$document注入您的指令

Answer 10

也许我来不及，但这会奏效：

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对象。

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

10 个答案: