javascript - 多个 Controller 操纵 Angular 指令中的内容？

Question

我遇到了一个以前从未遇到过的问题，我完全不知道如何解决它。

我有一个容器，用于在各种 View 中显示成功和错误消息。该容器由 Angular 指令定义。

问题是我想要一个可以注入(inject)到我的 Controller 中的服务或类似的东西。然后，我可以使用此服务上的方法来使“警报框”出现和/或更改内容。

我如何在 Angular 中实现这个或类似的 DRY 设置？

Answer 1

三个完美的方法:

1. 使用 Angular 的事件系统，rootScope.$broadcast 或 scope.$emit 和 scope.$on 作为监听器，请参阅此处的文档:https://docs.angularjs.org/api/ng/type/ $rootScope.Scope#$广播 https://docs.angularjs.org/api/ng/type/ $rootScope.Scope#$emit https://docs.angularjs.org/api/ng/type/ $rootScope.Scope#$on

2. 将服务注入(inject)到“警报框”指令中，让它以某种方式向服务注册自己，这样服务就知道它的存在，并可以直接控制指令的 Controller 、范围或元素，或任何您想使用的逻辑。

3. 使用具有编排逻辑的容器作为父容器。子指令可以要求容器 Controller ，并调用容器上的函数等，然后一个子指令就可以通过此编排父容器触发另一个子指令。

编辑: 我的目的不是向您展示如何以最通用和最干净的方式执行此操作，因为我不知道您的确切情况，您应该始终考虑您想要的功能的通用和抽象程度。 这是一个非常非常简单的例子来展示它不是寻找一些复杂的系统或模式，而是找到适合你的东西

方法 2 示例:

angular.module('myApp').service( 'myService', myService );

function myService(){
  this.alertBoxes = {};

  this.registerAlertBox = function(name, handle){
    this.alertBoxes[ name ] = handle;
  }

  this.toggleAlertBox = function(byName){
    this.alertBoxes[ byName ]();
  }
}

从您正在寻找的功能来看，我个人会使用方法3，方法2可以是使用rootScope.$broadcast和scope.$on的通用pubsub服务，或者甚至不关心这些并执行它就像一个非常直接的 pubsub。

方法 1 确实是最简单的方法，但显然会受益于抽象到服务中，每次需要非常特定的 pubsub 事件时都可以注入(inject)服务。

有关发布/订阅模式的示例:Pub/Sub design pattern angularjs service