没有jQuery的AngularJS DOM /文档选择

Question

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

但是,DOM选择仍然是王者,我试图将jQuery从我的应用程序中删除,仅用于DOM选择的唯一目的.

Angular提供$ document服务作为注入.我发现这很麻烦.例如,要使用$ document实现本机DOM选择,您需要将$ document注入所需的所有指令并调用querySelectorAll,然后使用Angular扩展它:

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

这太傻了.

在那里,我已经为自己提供了一个全球帮手,但它没有使用Angular的包装$文件......

  // 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.它仅适用于您需要处理$window或$document在a Controller或a中的罕见情况和情况Service.

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

角度设计的方式,你不需要复杂的选择器.如果您正在进行复杂的选择(甚至在指令内部),可能有一种更简单的方法.请注意,该指令允许您直接访问它所附加的元素.现在你应该主要关注元素周围的元素,也许是兄弟姐妹或直接孩子的元素.如果您正在寻找其他地方的节点,那么这是"气味"的第一个迹象.

如果你能告诉我们你想要达到的目标,那么有人可能会建议你一个能够很好地解决问题的解决方案.