AngularJS DOM 选择器

Question

我有一些使用 jQuery 实现动画效果的自定义指令（angular 的内置 ngShow/ngHide 等功能实用，但不美观）。我想我记得在文档中某处读到 Angular 有自己的 DOM 选择器（类似于 angular.export() 或 angular.select()），我应该使用它而不是 $(SELECTOR)；但是现在找不到了。

我正在做这样的事情：

//view
<div scroll-to="element"> //`element` is set via ng-click
  …
</div>

//directive
link: function(scope, elm, attrs)
{

  scope.$watch(attrs.scrollTo, function scrollToAction(newValue,oldValue)
  {
    if ( newValue !== oldValue )
    {
      elm.animate({
        scrollTop:
          $('#'+newValue).offset().top //replace jquery selector with angular's
          - elm.offset().top
          + elm.scrollTop()
      });
    }
  });

}

我并没有真正操纵$('#'+newValue)，只是检索有关它的信息，所以我不认为我对 Angular 犯了罪。

Answer 1

作为official AngularJs doc says

Angular 中的所有元素引用总是用 jQuery 或 jqLit​​e 包装（例如指令的编译/链接函数）。它们绝不是原始的 DOM 引用。

详细说明：如果您在 Angular 引用中包含 jQuery before，则 angular.element() 函数将成为 jQuery 的别名（否则为 jqLite，请参阅 Mark Rajcok 的回答)。

---

如果您正在获取 jQuery 或 jqLit​​e，您可以通过在调用 angular.element() 的行放置断点来检查开发工具调试器。悬停时，系统会提示您输入相关库，请参见下面的屏幕截图（在我的情况下，我得到 jQuery）。

---

作为official AngularJs doc says

对于按标签名称查找，请改用angular.element(document).find(...) 或$document.find()

换句话说：如果您在调用angular.element() 时获得了jQuery，那么如果您正在考虑的话，像angular.element('#foo > bar') 这样的任何东西都可以工作。

---

如果您想知道如何在不使用 jQuery 的情况下获得此选择器功能，那么您可能需要使用 Sizzlejs。 Sizzle is the selector library that jQuery uses under the hood.

Answer 2

“jqLit​​e”（在angular.element页面上定义）提供了DOM遍历方法，如children()、parent()、contents()、find()、next()（但不是previous()）。没有类似选择器的方法。

您可能想试试 JavaScript 的 querySelector。