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

问题描述

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

I'm using the "Angularised" version of the Spin control, as documented here: http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

我不喜欢显示的解决方案的一件事是在服务中使用 jQuery，它有效地将自旋控件附加到 DOM 元素.我更喜欢使用角度构造来访问元素.我还想避免对微调器需要在服务中附加到的元素的 id 进行硬编码"，而是使用在服务(单例)中设置 id 的指令，以便该服务的其他用户或服务本身不需要知道这一点.

One of the things I don't like about the shown solution is the use of jQuery in the service that effectively attaches the spin control to the DOM element. I would prefer to use angular constructs to access the element. I'd also like to avoid "hard-coding" the id of the element that the spinner needs to attach to within the service and instead use a directive that sets the id in the service (singleton) so that other users of the service or the service itself don't need to know that.

我正在为 angular.element 为我们提供的内容与相同元素 id 上的 document.getElementById 为我们提供的内容而苦苦挣扎.例如.这有效:

I'm struggling with what angular.element gives us vs what document.getElementById on the same element id gives us.eg. This works:

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

这些都没有:

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

我显然在做一些明显错误的事情！有人可以帮忙吗?

I'm clearly doing something that should be fairly obvious wrong! Can any one help?

假设我可以使上述工作正常进行，我在尝试替换对元素的 jQuery 访问时遇到了类似的问题:例如 $(target).fadeIn('fast'); 有效angular.element('#appBusyIndi​​cator').fadeIn('fast') 或 angular.element('appBusyIndi​​cator').fadeIn('fast') 不会

Assuming I can get the above working, I have a similar problem with trying to replace jQuery access to the element:eg $(target).fadeIn('fast'); works angular.element('#appBusyIndicator').fadeIn('fast') or angular.element('appBusyIndicator').fadeIn('fast') doesn't

有人能给我指出一个很好的文档示例，它阐明了 Angular元素"与 DOM 元素的使用?Angular 显然用自己的属性、方法等包装"了元素，但通常很难获得原始值.例如，如果我有一个 <input type='number'> 字段，并且我想访问用户键入--"(不带引号)时在 ui 中可见的原始内容) 我什么也没得到，大概是因为type=number"意味着 Angular 拒绝输入，即使它在 UI 中可见，我想看到它，以便我可以测试它并清除它.

Can someone point me to a good example of documentation that clarifies use of an Angular "element" vs the DOM element? Angular obviously "wraps" the element with its own properties, methods etc but it's often hard to get the original value. For example if I have an <input type='number'> field and I want to access the original contents that are visible in the ui when the user types "--" (without the quotes) I get nothing, presumably because the "type=number" means Angular is rejecting the input even though it's visible in the UI and I want to see it so I can test for it and clear it down.

感谢任何指点/答案.

谢谢.

推荐答案

它可以这样工作:

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

您包装了 Document.querySelector() 原生 Javascript 调用 angular.element() 调用.所以你总是在 jqLit​​e 或 jQuery 对象中获取元素，这取决于 jQuery 是否可用/加载.

You wrap the Document.querySelector() native Javascript call into the angular.element() call. So you always get the element in a jqLite or jQuery object, depending whether or not jQuery is available/loaded.

angular.element 的官方文档:

Official documentation for angular.element:

如果 jQuery 可用，angular.element 是 jQuery 函数的别名.如果 jQuery 不可用，angular.element 将委托给 Angular 的 jQuery 内置子集，称为jQuery lite"；或 jqLit​​e.

Angular 中的所有元素引用总是用 jQuery 或 jqLit​​e 包裹(例如指令编译或链接函数中的元素参数).它们从来都不是原始的 DOM 引用.

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()，请阅读这个答案.

In case you do wonder why to use document.querySelector(), please read this answer.

这篇关于angular.element 与 document.getElementById 或带有旋转(忙)控件的 jQuery 选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！