javascript 没有 jQuery 的 AngularJS DOM/文档选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15576362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS DOM / document selections without jQuery
提问by BradGreens
AngularJS doesn't have a built in DOM selection engine yet provides utility methods that handle a portion of what jQuery would provide for a typical application.
AngularJS 没有内置的 DOM 选择引擎，但提供了一些实用方法来处理 jQuery 为典型应用程序提供的部分内容。
However, DOM selection is still king and I'm trying to keep jQuery out of my application for the sole purpose of DOM selections.
然而，DOM 选择仍然是王道，我试图将 jQuery 排除在我的应用程序之外，仅用于 DOM 选择。
Angular provides a $document service as an injectable. I find this to be cumbersome. For example, to achieve native DOM selections using $document you would need to inject $document into all directives desired and call querySelectorAll, then extend it with Angular:
Angular 提供了一个 $document 服务作为一个可注入的。我觉得这很麻烦。例如，要使用 $document 实现原生 DOM 选择，您需要将 $document 注入所有所需的指令并调用 querySelectorAll，然后使用 Angular 扩展它：
angular.element( $document[0].querySelectorAll('#element') )
This is silly.
这是愚蠢的。
In there interim I've provided myself a global helper, but it doesn't use Angular's wrapped $document...
在此期间，我为自己提供了一个全局助手，但它不使用 Angular 的包装 $document ...
// Create a shortcut to querySelectorAll
window.query = function(selector) {
return document.querySelectorAll( selector )
}
// For use inside a directive like so...
angular.element( query('#element') )
AngularJS is ALLERGIC to globals and wraps globals for protection and testability. Is there a clean way I can leverage querySelectAll without passing $document into every directive? Can I extend angular.element in the same fashion jQuery does but utilize querySelectorAll?
AngularJS 对全局变量过敏，并且为了保护和可测试性包装了全局变量。有没有一种干净的方法可以利用 querySelectAll 而不将 $document 传递到每个指令中？我可以以与 jQuery 相同的方式扩展 angular.element 但使用 querySelectorAll 吗？
Edit:
编辑：
I also want to note the original JQLite library supports basic selectors https://code.google.com/p/jqlite/wiki/UsingJQLite#Supported_Selectors.
我还要注意原始 JQLite 库支持基本选择器https://code.google.com/p/jqlite/wiki/UsingJQLite#Supported_Selectors。
The AngularJS implementation however does not support selectors nor appears to mention this feature omission - http://docs.angularjs.org/api/angular.element
然而，AngularJS 实现不支持选择器，也似乎没有提到这个功能遗漏 - http://docs.angularjs.org/api/angular.element
Instead AngularJS does:
相反，AngularJS 会：
throw Error('selectors not implemented');
^ when the item passed to angular.element is a string which does not start with '<'.
^ 当传递给 angular.element 的项目是一个不以“<”开头的字符串时。
It'd be nice if that was:
如果是这样就好了：
return document.querySelectorAll( element )
...with some basic error prevention logic.
...具有一些基本的错误预防逻辑。
回答by ganaraj
$documentis a wrapper, true. Maybe one of the Angular authors could confirm this, but I think it was not meant to be injected into directives. Neither is $window. Its only for the rare conditions and cases where you need to deal with $windowor $documentin a Controlleror a Service.
$document是一个包装器，真的。也许其中一位 Angular 作者可以证实这一点，但我认为这并不意味着要注入指令。也不是$window。它仅适用于您需要处理$window或$document在 aController或 a 中的罕见情况和情况Service。
When you are in a directive, the DOM is assumed. So, feel free to use documentor windowdirectly if you wish.
当您在指令中时，假定 DOM。所以，如果你愿意，可以随意使用document或window直接使用。
The way angular is designed, you dont need complex selectors. If you are doing a complex selection ( even inside directives ) there is probably a simpler way to do it. Note that the directive gives you access directly to the element to which it is attached. Now you should be concerned mostly with the elements around your element, perhaps elements that are like siblings or direct children. If you are looking for nodes that are somewhere else, then that is the first sign of a "smell".
angular 的设计方式，你不需要复杂的选择器。如果您正在进行复杂的选择（甚至在指令内部），可能有一种更简单的方法来完成。请注意，该指令使您可以直接访问它所附加的元素。现在您应该主要关注您的元素周围的元素，可能是像兄弟姐妹或直系孩子的元素。如果您正在寻找其他地方的节点，那么这是“气味”的第一个迹象。
If you could let us know what you are attempting to achieve, then someone could suggest you a solution that breaks things up nicely.
如果您可以让我们知道您要实现的目标，那么有人可以向您建议一个可以很好地分解事物的解决方案。
