javascript - AngularJS:指令与 Controller - 什么逻辑放在哪里？

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它.


8年前关闭。







Improve this question




我对 Angular 很陌生，并尝试真正学习如何组织我的代码，因此 future 的同事将能够快速找到解决方法。

我知道的一条规则是“如果它操纵 DOM，请将其放入指令中”，我遵守了这一规则。

但是有时我不确定将我的方法放在哪里，因为我可以将它们放入主应用程序 Controller 中，放入作为指令中“ Controller ”选项提供的 Controller 中，甚至在初始化指令的函数中(选项“关联”)。

使用过滤器和服务对我来说很清楚，但是使用 Controller 和指令时，这条线变得非常模糊。
我已经意识到，即使使用一个小应用程序，我也会到处散布一些代码，这已经令人困惑，甚至对我自己也是如此。所以我想获得一些关于更好地组织我的代码的提示。

所以我想我的主要问题是:
1) 是否有一个好的经验法则可以知道将哪些代码放在哪里？

或者如果这太抽象了，这里有一些例子:
2)我有一个模板指令，我只在我的应用程序中使用。当我单击元素时，应该会发生一些事情。我已经知道使用 ng-click 指令优于在链接函数中绑定(bind)点击事件。
但是我应该在哪里定义 ng-click 中提供的方法？

A) 应用程序的主 Controller 。

B) 指令的“链接”功能。

C) 将 Controller 添加到指令中(使用“ Controller ”选项)并在那里定义它。

3) 如果我打算在其他地方重用该指令，2) 的答案会有所不同吗？

4)不同的场景:
我有一个按钮，当单击并拖动它时，它应该移动一个完全不相关的元素。
我是不是该...

A)创建一个指令并根据传递的属性影响模板和行为？

B) 创建两个指令(一个用于句柄，一个用于目标元素)
如果是这样，它再次提出了将处理拖动的方法放在哪里的问题？

笔记:
我知道答案可能有点取决于个人意见，但我有点希望有一些“规则”或“正确的方法”，我可以在 future 的发展中遵守这些规则。
出于简洁的原因，我没有包含任何代码。
如果需要答案，我很乐意提供。

感谢您的时间。

Answer 1

首先，很好的问题。我认为每个新的 Angular 开发人员都在与所有给定组件( Controller 、指令、服务、过滤器等)的差异作斗争。

让我们从基本的正式定义开始:

Directives are markers on a DOM element that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element.

另一方面

Controller is a JavaScript constructor function that is used to augment the Angular Scope

定义的行为确实引导我们通过一些经验法则。

所以对于你上面的问题:

简单来说，我们使用 Controller 来管理一个区域(范围)
具有 Controller 带来的所有强大功能的 HTML 模板
(双向绑定(bind)、作用域行为、服务注入(inject)等)我们
当我们希望操作现有的 HTML 元素或
在大多数情况下自定义自己的 - 当我们考虑重用时
这个元素。

这取决于 ng-click 应该做什么的上下文。假设您有一个数字输入的自定义指令，该指令具有您在指令配置中定义的自定义设计和行为。并且您以 ng-click 假设弹出具有可选值的模式并在应用程序中的不同位置使用它的形式使用它，而 ng-click 将执行其他操作。在这种情况下，函数需要是 scope.fucntion。但是假设位置和其他所有位置都将完全相同，这会将函数带到指令范围。

上面回答:)

你的每一个选择都可以，这就是“意见”和较少的经验法则存在的地方。为什么？因为当各有利弊时，这两种方法都会起作用。我可以在场景中找到的经验法则是，如果两个元素都是指令模板的一部分，我希望“行为”(拖动功能)成为指令范围的一部分。

祝你好运