AngularJS从控制器到指令的通信

AngularJS communication from controller to directive

本文关键字:通信 指令 控制器 AngularJS      更新时间:2023-09-26

我的问题是关于从控制器到在该控制器上下文中创建的指令的通信。我特别想知道在这种情况下推荐的/最好的方法是什么。我能想到三种不同的可能性:

在指令

使用手表

在这种情况下,指令在隔离作用域中设置一个监视变量,并对其变化做出反应:

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"/>

在这种情况下,哪个被认为是最佳实践?我是不是错过了其他选项?谢谢。

我个人倾向于使用事件。

使用看

唯一的缺点(我可以看到)是它引入了一个小的性能影响,并且取决于代码库,小事情最终会累积起来。

使用控件对象

我认为这在指令和控制器之间引入了强耦合。再想象一下,一个项目的新开发者进来,看到this.controlObject.fn(),他们就像……fn在哪里定义的?然后你开始搜索。

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

使用事件

使用一个通用命名的事件,如"component"。x更新"你保持耦合到最小,更重要的是,一个新的指令(或模态弹出…