没有jQuery的AngularJS DOM /文档选择

AngularJS DOM / document selections without jQuery

本文关键字：文档 选择 DOM AngularJS jQuery 没有      更新时间：2023-09-26

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不传递$文档到每一个指令?我可以扩展角度。元素，但使用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时。元素是不以'<'开头的字符串。

如果是:

return document.querySelectorAll( element )

…使用一些基本的错误预防逻辑

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

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

根据angular的设计方式，你不需要复杂的选择器。如果你正在做一个复杂的选择(甚至在指令内部)，可能有一个更简单的方法来做。请注意，该指令允许您直接访问它所附加的元素。现在您应该主要关注元素周围的元素，可能是类似兄弟或直接子元素的元素。如果你正在寻找其他地方的节点，那么这就是"气味"的第一个迹象。

如果你能让我们知道你想要达到的目标，那么有人会建议你一个解决方案，把事情分解得很好。

相关文章：