AngularJS DOM / 没有 jQuery 的文档选择

Question

AngularJS 没有内置的 DOM 选择引擎，但提供了一些实用方法来处理 jQuery 为典型应用程序提供的部分功能。

但是，DOM 选择仍然是王道，我试图将 jQuery 排除在我的应用程序之外，仅用于 DOM 选择。

Angular 提供了 $document 服务作为可注入对象。我觉得这很麻烦。例如，要使用 $document 实现本地 DOM 选择，您需要将 $document 注入所需的所有指令并调用 querySelectorAll，然后使用 Angular 扩展它：

angular.element( $document[0].querySelectorAll('#element') )

这很愚蠢。

在此期间，我为自己提供了一个全局帮助器，但它不使用 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 对全局变量过敏，并且为了保护和可测试性包装了全局变量。有没有一种干净的方法可以利用 querySelectAll 而无需将 $document 传递到每个指令中？我可以以与 jQuery 相同的方式扩展 angular.element 但使用 querySelectorAll 吗？

编辑：

我还要注意原始 JQLite 库支持基本选择器 https://code.google.com/p/jqlite/wiki/UsingJQLite#Supported_Selectors。

然而，AngularJS 实现不支持选择器，也似乎没有提到这个功能遗漏 - http://docs.angularjs.org/api/angular.element

AngularJS 会这样做：

throw Error('selectors not implemented');

^ 当传递给 angular.element 的项目是不以'

如果是这样就好了：

return document.querySelectorAll( element ) 

...带有一些基本的错误预防逻辑。

Answer 1

$document 是一个包装器，是的。也许 Angular 的作者之一可以证实这一点，但我认为它并不是要注入指令中。 $window 也不是。它仅适用于需要在Controller 或Service 中处理$window 或$document 的罕见情况和情况。

当您在指令中时，将假定 DOM。因此，如果您愿意，可以直接使用document 或window。

Angular 的设计方式，你不需要复杂的选择器。如果您正在做一个复杂的选择（甚至在指令内部），可能有一种更简单的方法可以做到这一点。请注意，该指令使您可以直接访问它所附加的元素。现在您应该主要关注元素周围的元素，可能是兄弟元素或直接子元素。如果您正在寻找其他地方的节点，那么这是“气味”的第一个迹象。

如果您可以让我们知道您想要实现的目标，那么有人可以向您推荐一个可以很好地解决问题的解决方案。