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只是将其转换回jqLite / jQuery对象）

但是，如果用户在其页面上多次添加指令，那么该行将找到错误的元素，因为document.getElementById("add-button")可能会在整个页面上找到具有该ID的第一个匹配元素。

由于jqLite只能通过标记名称找到，所以我们可以通过返回DOM方法来实现：

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

或者，我不知道为什么jqLite不允许你通过类名或ID找到，因此可能建议在AngularJS之前实际加载jQuery，并使用完整版的jQuery：

element.find("#add-button")

或者，据说只有一个具有相同ID的元素应该存在于整个页面上，所以为了更加正确，我们确实应该使用类名而不是ID来标识元素，例如{ {1}}并通过

找到它

<button class="add-button">

我认为按标签名称搜索，然后使用第一个找到的元素或第二个找到的元素不是一个好方法，因为如果模板稍后更改或重新排列，那么你需要更改你的代码，所以它是太紧密地结合在一起了。

Answer 1

最常见的方式（由John Papa和Todd Motto看到）与jqLite一起使用。最糟糕的方法是在没有限制的情况下在指令中使用JQuery。

绝对最坏的情况：

$('.some-class')

好多了：

element.find('.some-class')

同样有效：

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

那么，为什么你会做这样的事情，从指令操纵DOM？有很多原因。也许你想初始化一些JQuery插件，如datepicker或nanoscroller，那么你需要这样的东西。

Styleguides只是philosphy，你可以接受它们，你只相信整个指南的一小部分，或者你创建自己的。有一些指导原则可以大大改善您的代码（性能，可读性等）。

<强> Styleguides