angular.element与document.getElementById或jQueryselect器与旋转（繁忙）控制
我正在使用Spin控件的“Angularised”版本，如下所示： http : //blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/
我不喜欢的解决scheme之一是在服务中使用jQuery来有效地将旋转控件附加到DOM元素。 我宁愿使用angular构造来访问元素。 我还想避免在服务中对微调器需要附加的元素的id进行“硬编码”，而是使用一个在服务（单例）中设置id的指令，以便服务的其他用户服务本身不需要知道这一点。
我正在挣扎什么angular.element给我们什么document.getElementById在相同的元素ID给我们。 例如。 这工作：
var target = document.getElementById('appBusyIndicator'); 这些都不是：
var target = angular.element('#appBusyIndicator'); var target = angular.element('appBusyIndicator');
我明显在做一些相当明显的错误！ 任何人都可以帮忙吗？
假设我可以得到上述工作，我有一个类似的问题，试图取代jQuery访问元素：例如$(target).fadeIn('fast'); 工作angular.element('#appBusyIndicator').fadeIn('fast') or angular.element('appBusyIndicator').fadeIn('fast')不
有人能给我一个很好的例子，说明一个angular度“元素”与DOM元素的使用吗？ Angular显然会用自己的属性，方法等来“包装”这个元素，但是通常很难获得原始值。 例如，如果我有一个<input type='number'>字段，并且当用户键入“ – ”（不带引号），我想访问在ui中可见的原始内容时，我什么也得不到，大概是因为“ type = number“意味着Angular拒绝了input，即使它在UI中是可见的，我也想看到它，所以我可以testing它并清除它。
任何指针/答案表示赞赏。
谢谢。
它可以这样工作：
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或jqLite（例如指令编译或链接函数中的元素参数）。 他们从来没有原始的DOM参考。
如果你不知道为什么要使用document.querySelector() ，请阅读这个答案 。
如果您还没有阅读angular度元素文档，那么您应该阅读jqLite所支持的内容，而不是jQueryite是内置于angular中的jquery的一个子集。
这些select器不能单独使用jqLite，因为不支持通过id select器 。
var target = angular.element('#appBusyIndicator'); var target = angular.element('appBusyIndicator');
所以，要么：
- 你只使用jqLite，比jquery更有限，但在大多数情况下是足够的。
- 或者你在你的应用程序中包含完整的jQuery库，并像jquery一样在你真正需要jQuery的地方使用它。
编辑：请注意，jQuery应该在 angularJS 之前加载，以便优先于jqLite：
真正的jQuery总是优先于jqLite，只要它在DOMContentLoaded事件触发之前加载。
编辑2：我错过了之前的问题的第二部分：
与<input type="number"> ，我认为这不是一个angular度的问题，这是本机 html5数字元素的预期行为。
即使您尝试使用jquery的.val()或原始的.value属性来检索它，也不会返回非数字值。
var target = document.getElementById('appBusyIndicator');
等于
var target = $document[0].getElementById('appBusyIndicator');
我不认为这是使用angular度的正确方法。 如果框架方法不存在，请不要创build它！ 这意味着框架（这里angular）不这样工作。
有了angular度，你不应该像这样（jQuery的方式）操纵DOM，而是使用angular度助手，如
<div ng-show="isLoading" class="loader"></div>
或者创build你自己的指令（你自己的DOM组件），以便完全控制它。
顺便说一句，你可以在这里看到http://caniuse.com/#search=queryselector querySelector是很好的支持，所以可以安全地使用。
您应该在控制器中注入$ document，并使用它来代替原始文档对象。
var myElement = angular.element($document[0].querySelector('#MyID'))
如果你不需要jquery样式的元素包装，$ document [0] .querySelector（'＃MyID'）会给你DOM对象。
你可以使用$ 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');
如果有人使用gulp，它会显示一个错误，如果我们使用document.getElementById() ，它build议使用$document.getElementById()但它不起作用。
使用 –
$document[0].getElementById('id')
这对我很好。
angular.forEach(element.find('div'), function(node) { if(node.id == 'someid'){ //do something } if(node.className == 'someclass'){ //do something } });
也许我在这里太晚了，但这将工作：
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对象。
改进kaiser的答案：
var myEl = $document.find('#some-id');
不要忘记注入$document到您的指令
