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
            });
        }
    };
});

使用控制对象

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

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()，他们就像...定义了哪里？然后你开始搜索。

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

使用活动

通常命名为＆＃34; component.x-updated＆＃34;你保持耦合到最低限度，不止于此，新指令（或模态弹出窗口......或其他）只需要对事件作出反应。

从控制器到指令

1 个答案: