對於AngularJS自定義指令，什麼是在您的模板中查找子元素的正確方法？

Question

說，如果你定義與模板指令：

<div> 
    <button id="add-button">add</button> 
    {{ value }} 
    <button id="minus-button">minus</button> 
</div> 

那麼什麼是找到你的link(scope, element, attrs)功能的按鈕，以正確的方式？

---

一些想法和細節：

我見過

angular.element(document.getElementById("add-button")) 

（該angular.element是把它轉換回jqLit​​e/jQuery對象）

但如果一個用戶在其頁面上多次添加您的指令，那麼該行將找到錯誤的元素，因爲document.getElementById("add-button")可能會找到第一個匹配元素在具有該ID的整個頁面上。

由於jqLite只能通過標籤名稱查找，所以我們也許能夠做的，通過返回DOM方法：

angular.element(element[0].querySelector("#add-button")) 

或者說，我不知道爲什麼jqLit​​e不會讓你找到通過類名或ID，所以它可能被推薦到實際AngularJS之前加載jQuery和使用完整版本的jQuery：

element.find("#add-button") 

或者，按說只能用相同的ID一個元素在整體上應該存在頁面，所以要更正確，我們真的應該而不是使用ID類名由

element.find(".add-button") 

識別元素，如<button class="add-button">，發現它我認爲標籤名稱搜索，然後用1號找到的元素或第二個找到的元素是不是一個好辦法，因爲如果稍後更改或重新排列模板，那麼您需要更改代碼，因此它們緊密耦合在一起。

Answer 1

最常見的方式（John Papa和Todd Motto見過）是用jqLit​​e去的。 最糟糕的方式是使用JQuery裏面的指令沒有限制。

是絕對最壞的情況：

$('.some-class') 

好多了：

element.find('.some-class') 

也看到和有效：

$(element.find('.some-class')) 

那麼，爲什麼你會做這樣的事情，從操作DOM指示？有一大堆理由。也許你想初始化一些JQuery插件，比如datepicker或者nanoscroller，那麼你需要這樣的東西。

Styleguides只是philosphy，你可以接受它們，你只是相信整個指南的一小部分，或者你創建自己的。這裏有一些指導方針，可以大大提高你的代碼（性能，可讀性等）。

Styleguides

Angular 2 John Papa

Angular 1.x John Papa

Angular 1.x Todd Motto