AngularJS DOM选择器

Question

AngularJS DOM选择器

jac*_*cob 35 javascript jquery-selectors angularjs angularjs-directive

我有一些使用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()
      });
    }
  });

}

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Ben*_*esh 39

正如AngularJs官方文件所述

Angular中的所有元素引用始终用jQuery或jqLite包装(例如指令的编译/链接函数中的元素参数).它们永远不是原始的DOM引用.

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

如果您通过在您调用的行放置断点来获取jQuery或jqLite,则可以检查Dev Tool调试器angular.element().当鼠标悬停时,系统会提示您输入相关的库,请参阅下面的截图(在我的例子中,我得到了jQuery).

jQuery for <code>angular.element(document).find(...)</code>或<code>$document.find()</code></p>
</blockquote>

<p>换句话说:如果你在调用时得到jQuery <code>angular.element()</code>,那么任何类似<code>angular.element('#foo > bar')</code>的东西都会起作用,如果这就是你的想法.</p>

<hr>

<p>如果你想知道如何在没有jQuery的情况下获得这个选择器功能,那么你可能想要使用<a rel= Sizzlejs.Sizzle是jQuery在引擎盖下使用的选择器库.

Answer 2

Mar*_*cok 36

"jqLite"(即上定义angular.element页)提供了如DOM遍历方法children(),parent(),contents(),find(),next()(但不是previous()).没有类似选择器的方法.

您可能想尝试JavaScript的querySelector.

@jacob,我会使用`angular.element()`,这样如果将来你的代码不再需要jQuery,你就不必更新它了. (4认同)

归档时间：	12 年，9 月前
查看次数：	88876 次
最近记录：	9 年，9 月前