AngularJS DOM选择(AngularJS DOM selector)

2019-07-21 04:45发布

我有一个使用jQuery的动画效果(角的内置ngShow / ngHide之类的功能,而不是漂亮的)一些自定义指令。 我想我还记得在文档中读书的地方,角度都有自己的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)只是检索有关它的信息,所以我不认为我犯对角的罪行。

Answer 1:

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

你可能会想尝试JavaScript的querySelector 。



Answer 2:

由于官方AngularJs医生说

所有元素引用总是jQueryjqLit​​e 包裹 (如在指令的编译/链接功能的元件参数)。 他们从来没有生DOM引用。

在详细说明:如果您在角参考之前包括jQuery的 ,在angular.element()函数成为jQuery的一个别名(它否则jqLite ,看到马克Rajcok的答案)。


您可以在开发工具调试检查,如果你得到的jQuery或jqLit​​e通过在该行放置一个断点,你叫angular.element() 当它盘旋,你会被提示输入相关库,见下面的截图(在我的情况,我得到的jQuery)。


由于官方AngularJs医生说

对于由标签名称查找,会转而angular.element(document).find(...)$document.find()

换句话说:如果你打电话时,你得到的jQuery angular.element()然后像什么angular.element('#foo > bar')工作,如果这是你在想什么。


如果你想知道如何得到这个选择功能无jQuery的,那么你可能需要使用Sizzlejs 。 咝咝声是jQuery的引擎盖下使用选择库 。



文章来源: AngularJS DOM selector