5

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 )

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

4

1 回答 1

5

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

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

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

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

于 2013-03-22T18:49:37.963 回答