Angular 指令 - 何时更喜欢在指令中使用控制器？答案

【问题标题】：Angular directive - when to prefer using a controller inside a directive?Angular 指令 - 何时更喜欢在指令中使用控制器？
【发布时间】：2014-04-15 18:42:14
【问题描述】：

我看到了很多包含控制器的指令。将相同的代码放在指令的链接函数中相比，有哪些优缺点和用例？

一个指令可以使用另一个指令的控制器 => 好的，但还有什么？只是为了有一个更干净/独立的代码吗？

然后，例如，在指令上添加点击事件的情况下..放在哪里？（链接功能导致我可以直接访问element 参数？还是在控制器中？

感谢您的澄清

【问题讨论】：

docs：“最佳实践：当你想向其他指令公开 API 时使用控制器。否则使用链接。”

标签： javascript angularjs architecture angularjs-directive angularjs-controller

【解决方案1】：

在我看来，使用控制器向指令（而不是链接函数）添加行为的主要原因之一是，您不能真正对指令的链接函数中的逻辑进行单元测试（而控制器可以很容易地测试和模拟）。

由于控制器被注入到指令的链接函数中，您可以轻松地使用实际元素调用（或初始化）控制器中的某些方法以将行为绑定到它。

例如：

angular.module('foo', [])
.controller('MyController', function () {
    this.init = function (element) {
        element.on('click', function () {
            //do something
        });
    };
})
.directive('MyDirective', function () {
    return {
        controller: 'MyController',
        link: function (scope, elem, attrs, ctrl) {
            ctrl.init(elem);
        } 
    };
});

如果您只是添加一些应该在指令模板中显示的范围变量（即没有什么对测试非常重要）- 链接函数就可以了。

angular-ui-bootstrap 的人正在做一个很好的例子： https://github.com/angular-ui/bootstrap/tree/master/src

【讨论】：