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

Question

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

我知道的一条规则是"如果它操纵DOM,将其置于指令中",我遵守.

但有时我不确定在哪里放置我的方法,因为我可以将它们放入主app控制器,作为指令中作为"控制器"选项提供的控制器,甚至在指令中的函数内(选项) "链接").

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

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

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

• A)应用程序的主控制器.
• B)指令的"链接"功能.
• C)向指令添加一个控制器(使用"controller"选项)并在那里定义它.

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

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

• A)创建一个指令并根据传递的属性影响模板和行为？
• B)创建两个指令(一个用于句柄,一个用于目标元素)
  如果是这样,它再次提出了将方法放在何处处理拖动的问题？

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

感谢您的时间.

Answer 1

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

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

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

而另一方面

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

定义的行为确实指导我们完成一些经验法则.

所以对于你上面的问题:

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

祝好运

Answer 2

1）是否有一个好的经验法则来知道将哪些代码放在哪里？

这里有很多东西在发挥作用；我不确定是否存在“指令与控制器”之争。他们对我来说似乎很不同。如果您不知道的话，指令可以有自己的控制器。

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

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

我有一个带有模板的指令，仅在我的应用程序中使用。当我点击该元素时，应该会发生一些事情。我已经知道最好使用 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项；传入需要作为指令参数进行操作的元素。然而，这取决于我对这个功能的可重用性的关心程度。

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