Question

我对角度很新，并试图真正学习如何组织我的代码，所以未来的同事将能够快速找到他们的方式。

我知道的一条规则是“如果它操纵DOM，将其置于指令中”，我遵守。

但有时我不确定在哪里放置我的方法，因为我可以将它们放入主app控制器，放入作为指令中的“控制器”选项提供的控制器中，或者甚至在进入指令（选项“链接”）。

使用过滤器和服务对我来说非常清楚，但是对于控制器和指令，这条线变得相当模糊。我已经意识到，即使有一个小应用程序，我也会在这里和那里传播一些代码，这已经令人困惑，甚至对我自己也是如此。所以我想更好地组织我的代码。

所以我猜我的主要问题是：
1）有没有一个很好的经验法则可以知道放在哪里的代码？

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

A）应用程序的主控制器。
B）指令的“链接”功能。
C）将控制器添加到指令（使用“controller”选项）并在那里定义。

3）如果我计划在别处重复使用该指令，2）的答案是否会有所不同？

4）不同场景：
我有一个按钮，当点击并拖动时，它应该移动一个完全不相关的元素我应该......

A）创建一个指令并影响模板＆amp;基于传递属性的行为？
B）创建两个指令（一个用于句柄，一个用于目标元素）
如果是这样，它再次提出了将方法放在哪里来处理拖动的问题？

注意：
我知道答案可能有点依赖于个人意见，但我希望有一些“规则”或“正确的方法”，我可以遵守这些规则以便将来发展。出于简明的原因，我没有包含任何代码。如果答案需要，我很乐意提供答案。

谢谢你的时间。

Answer 1

首先，很好的问题。我认为每个有角度的开发人员都会遇到与所有给定组件（控制器，指令，服务，过滤器等）的差异。

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

指令是DOM元素上的标记，它告诉AngularJS的HTML编译器将指定的行为附加到该DOM元素。

而另一方面

Controller是一个JavaScript构造函数，用于扩充Angular Scope

定义的行为确实引导我们完成了一些经验法则。

因此，对于您的上述问题：

简单来说，我们用户控制器管理一个区域（范围）具有控制器带来的所有强大功能的HTML模板（双向绑定，范围行为，服务注入等）和我们当我们希望操纵现有的HTML元素时使用指令在大多数情况下，当我们考虑重用时，自定义自己这个元素。
这取决于ng-click应该做什么的上下文。假设您有一个数字输入的自定义指令，该指令具有您在指令配置中定义的自定义设计和行为。并且你以一种形式使用它，ng-click假设弹出一个带有可选值的模态，并在应用程序的不同位置使用它，ng-click将执行其他操作。在这种情况下，函数需要是scope.fucntion。但是，假设位置和其他所有位置都完全相同，这将函数带到指令范围。
上面回答：）
您的每个选项都会这样做，这就是“意见”所在的地方，并且存在较少的经验法则。为什么？因为当每个方面都有利弊时，两种方式都会起作用。我可以在场景中找到的经验法则是，如果两个元素都是指令模板的一部分，我希望'behavious'（拖动函数）成为指令范围的一部分。

Answer 2

1）是否有一个很好的经验法则可以知道放在哪里的代码？

这里有很多东西在玩;而且我不确定是否存在“指令与控制器”之争。他们似乎与我不同。如果您不知道，指令可以拥有自己的控制器。

我将指令视为一组特定的封装代码，包括HTML（View）和JavaScript代码（Controller）。当我想重用某些东西作为“封装”组件时，我使用指令。

如果我只想要重用一些JavaScript代码;我将放入一个AngularJS服务，我认为它只是一个没有任何HTML的JavaScript代码集合。

我有一个模板的指令，我只在我的应用程序中使用。当我点击元素时，会发生一些事情。我已经知道了最好使用ng-click指令来绑定点击链接功能中的事件。但是我应该在哪里定义方法以ng-click提供？

我会将处理程序定义为指令的隔离范围的一部分;像这样的东西：

scope: 
{            
    onButtonClick: '&onButtonClick'
}

将默认行为定义为指令链接或控制器的一部分。

link: function ( $scope, element, attrs ) {
  $scope.myDefaultButtonClick = function(){
    // do stuff
  }

        this.onInit = function(){
            if(!$scope.onButtonClick){
                $scope.onButtonClick = $scope.myDefaultButtonClick;
            }
        }
        this.onInit();
}

在你的JavaScript中;你可以调用作为参数传入的函数：

$scope.onButtonClick();

您可以在HTML模板中执行相同的操作。

<img src="button.png" ng-click="onButtonClick()">

3）如果我计划重复使用，2）的答案是否会有所不同其他指令？

如果我不打算重复使用;我可能不会使用指令。

I have a Button and when clicked and dragged it should move a completely unrelated Element.
Should I...

    A) Create one directive and influence template & behavior based on a passed attribute?
    B) Create two directives (one for the handle, one for the target Element)
    If so, it again poses the question of where to put the methods to handle the dragging?

我可能会选择A项;传递需要被操作的元素作为指令的参数。但是，这取决于我对这项功能的可用性的关注程度。

我说的一切都应该被认为是主观的。

AngularJS：指令与控制器 - 放在哪里的逻辑？

2 个答案: