javascript - 没有 jQuery 的 AngularJS DOM/文档选择

Question

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

但是，DOM 选择仍然是最重要的，我试图将 jQuery 排除在我的应用程序之外，仅出于 DOM 选择的目的。

Angular 提供 $document 服务作为可注入(inject)的。我觉得这很麻烦。例如，要使用 $document 实现 native DOM 选择，您需要将 $document 注入(inject)所有需要的指令并调用 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 的一位作者可以证实这一点，但我认为它不应该被注入(inject)到指令中。 $window 也不是。它仅适用于您需要在 Controller 或 Service< 中处理 $window 或 $document 的极少数情况和情况。

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

angular 的设计方式，你不需要复杂的选择器。如果您正在进行复杂的选择(甚至在指令内部)，则可能有更简单的方法。请注意，该指令使您可以直接访问它所附加的元素。现在你应该主要关注你的元素周围的元素，也许是像 sibling 或直接 child 的元素。如果您正在寻找其他地方的节点，那么这是“气味”的第一个迹象。

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