35

我有一些使用 jQuery 实现动画效果的自定义指令(angular 的内置 ngShow/ngHide 等功能实用,但不美观)。我想我记得在某个地方的文档中读到 angular 有它自己的 DOM 选择器(类似于angular.export()or 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 犯了罪。

4

2 回答 2

39

正如AngularJs 官方文档所说

Angular中的所有元素引用总是jQueryjqLit​​e 包装(例如指令的编译/链接函数中的元素参数)。它们绝不是原始的 DOM 引用。

详细说明:如果您在Angular 引用之前包含jQuery ,则该函数将成为 jQuery 的别名(否则,请参阅 Mark Rajcok 的答案)。angular.element()jqLite


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

<code>angular.element()</code> 的 jQuery


正如AngularJs 官方文档所说

对于按标签名称查找,请尝试改为angular.element(document).find(...)$document.find()

换句话说:如果你在调用 jQuery 时得到了 jQuery,那么如果你正在考虑的话angular.element(),任何类似的东西都可以工作。angular.element('#foo > bar')


如果您想知道如何在没有 jQuery 的情况下获得此选择器功能,那么您可能想要使用SizzlejsSizzle 是 jQuery 在后台使用的选择器库

于 2013-03-07T20:12:14.010 回答
36

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

您可能想尝试 JavaScript 的querySelector

于 2013-03-07T20:02:11.537 回答