angular.element VS的document.getElementById或jQuery选择自旋(忙)控制

问题描述:

我使用的旋转控制的Angularised版,如下记载:http://blog.xvit$c$cr.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/

一个我不喜欢的显示解决方案的一件事就是在有效地附着自旋控制的DOM元素中的服务使用jQuery的。我想preFER使用角度构建访问的元素。我也想避免硬编码的元素的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努力给了我们什么VS上的document.getElementById同一元素的ID给了我们。
例如。这工作:

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的访问元素类似的问题:
例如: $(目标).fadeIn('快'); 作品
    angular.element('#appBusyIndi​​cator')淡入('快') angular.element('appBusyIndi​​cator')。淡入(快。 )

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

有人能指出我有关阐明使用角元素与DOM元素的文档的一个很好的例子?显然角包装的元素有自己的属性,方法等,但它往往很难得到原始值。例如,如果我有一个<输入类型='号'> 字段,我想访问在UI当用户键入看得见的原始内容 - - (不带引号),我什么也没得到,presumably因为类型=号是指角被拒绝输入,即使它在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.

任何指针/ AP答案preciated。

Any pointers/answers appreciated.

感谢。

它的可以的这样的工作:

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

您包住Document.querySelector()$c$c>本地JavaScript 调入 angular.element()。所以,你总是在jqLit​​e或jQuery对象的元素,这取决于jQuery的是否可用/加载。

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

的官方文档 angular.element 一>

如果的jQuery 可用,angular.element是jQuery函数的别名。如果jQuery是不可用, angular.element 代表到角的内置jQuery的子集,名为jQuery的精简版或 jqLit​​e

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

万一你想知道为什么要使用 document.querySelector(),请阅读的这个答案

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