AngularJS DOM選擇器

我有幾個自定義指令使用jQuery的動畫效果（角度的內置ngShow/ngHide等功能，但不漂亮）。我想我記得在文檔的某個地方閱讀的角度有它自己的DOM選擇器（類似angular.export()或angular.select()），我應該使用，而不是$(SELECTOR);但是我現在找不到它。AngularJS DOM選擇器

我在做這樣的事情：

//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)，只是檢索有關它的信息，所以我不認爲我犯對角的罪行。

來源

2013-03-07 jacob

「jqLite」（在angular.element頁上所定義的）提供了DOM遍歷方法如children()，parent()，contents()，find()，next()（但不previous()）。沒有類似選擇器的方法。

您可能想試試JavaScript的querySelector。

來源

2013-03-07 20:02:11

+1我還添加了額外的信息，可以解釋爲什麼OP感覺他看到了可以選擇元素的角度方法。 – 2013-03-07 20:15:27

啊謝謝，沒錯，就是這樣。我在angular之前包含了jquery，那麼'angular.element（）'還是更可取的？它似乎會增加解析別名的額外開銷。 – jacob 2013-03-07 22:11:31

@jacob，我會使用'angular.element（）'，這樣如果將來你的代碼不再需要jQuery，你就不必更新它。 – 2013-03-07 23:00:03

作爲official AngularJs doc says

在角所有元素的引用總是包裹與jQuery的或jqLite（如在一個指令的編譯/鏈接功能的元件參數）。他們從來沒有原始的DOM參考。

具體爲：如果包括jQuery的之前，你的角參考，angular.element()功能成爲jQuery的一個別名（它否則jqLite，看到馬克Rajcok的答案）。

您可以在開發工具調試檢查，如果你得到的jQuery或通過jqLite在您致電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。

來源

2013-03-07 20:12:14

AngularJS DOM選擇器

回答

相關問題