AngularJS DOMselect器

我有几个自定义指令，使用jQuery的animation效果（angular度内置的ngShow / ngHide等function，但不漂亮）。 我想我记得在文档中的angular度有自己的DOMselect器（类似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

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

你可能想尝试JavaScript的querySelector 。

Answer 2

正如AngularJs官方文档所说的那样

Angular中的所有元素引用总是用jQuery或jqLit​​e包装 （例如指令的compile / link函数中的元素参数）。 他们从来没有原始的DOM参考。

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

---

如果您正在通过在您调用angular.element()的行处放置一个断点来获取jQuery或jqLit​​e，则可以检入Dev Tooldebugging器。 当它hover时，会提示你input相关的库，看下面的截图（在我的例子中，我得到了jQuery）。

---

正如AngularJs官方文档所说的那样

对于通过标签名称查找，请尝试改为angular.element(document).find(...)或$document.find()

换句话说：如果你在调用angular.element()时候得到jQuery，那么像angular.element('#foo > bar')这样的东西就可以工作，如果这就是你想要的。

---

如果您想知道如何在没有jQuery的情况下获得这个select器function，那么您可能需要使用Sizzlejs 。 Sizzle是jQuery使用的select器库 。