从控制器到指令的 AngularJS 通信

Question

我的问题是关于从控制器到在该控制器上下文中创建的指令的通信。特别是，我对在这种情况下推荐/最佳方法感兴趣。 我能想到三种不同的可能性：

在指令中使用监视

在这种情况下，指令设置一个监视变量，并在隔离范围内传递一个变量，并对它的变化做出反应：

directive('customDirective', function () {
    return {
        restrict: 'E',
        scope: {
            variable: '='
        },
        link: function (scope, elem, attrs) {
            scope.$watch('variable', function (newValue) {
                // Do something
            });
        }
    };
});

使用事件

使用第二种解决方案，指令使用作用域上的 $on 函数设置事件处理程序，然后对使用 $broadcast 函数发送的事件做出反应：

directive('customDirective', function () {
    return {
        restrict: 'E',
        link: function (scope, elem, attrs) {
            scope.$on('customEvent', function () {
                // Do something
            });
        }
    };
});

使用控制对象

我一直在考虑的最后一个选项是让指令使用它打算公开的函数来填充 control 对象。然后，控制器可以在需要时调用此对象上的函数：

directive('customDirective', function () {
    return {
        restrict: 'E',
        scope: {
            controlObject: '='
        },
        link: function (scope, elem, attrs) {
            scope.controlObject.fn = function () {
                // Do something
            };
        }
    };
});

controller('customController', function () {
    this.controlObject = {};

    this.performAction = function () {
        this.controlObject.fn();
    };
});

<custom-directive control-object="ctrl.controlObject"/>

在这种情况下，哪一个被认为是最佳做法？我错过了其他一些选择吗？ 谢谢。

Answer 1

我个人的偏好是使用事件。

使用手表

唯一的缺点（我可以看到）是它引入了一个小的性能损失，并且取决于代码库，最终加起来的东西很少。

使用控制对象

我认为这会在指令和控制器之间引入强耦合。另外，想象一下该项目的新开发人员进来并看到this.controlObject.fn()，他们就像...... fn 定义在哪里？然后你开始搜索。

另外，如果你有一个不同的指令需要从控制器知道一些东西，会发生什么？一个新的控制对象，一个新定义的函数..我不喜欢它。

使用事件

使用诸如“component.x-updated”之类的通用命名事件，您可以将耦合保持在最低限度，并且不止于此，新指令（或模态弹出窗口 .. 或其他）只需要对事件做出反应。