多个控制器在 Angular 指令中操纵内容？

Question

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

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

问题是我想要一个服务或类似的东西，我可以将其注入到我的控制器中。然后我可以使用此服务上的方法使 "alert box" 出现 and/or 内容更改。

如何在 Angular 中实现此设置或类似的 DRY 设置？

Answer 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
将服务注入 "alert box" 指令，让它以某种方式向服务注册自己，这样服务就知道它的存在并可以控制指令的控制器或其范围，或直接使用元素，或您希望使用的任何逻辑。
使用具有编排逻辑的容器作为父容器。子指令可以要求容器控制器，并在容器上调用函数等，然后一个子指令能够通过这个编排父容器触发另一个子指令。

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

方法二示例：

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 事件时都可以在其中注入服务。

pub/sub 模式示例：

多个控制器在 Angular 指令中操纵内容？

Multiple controllers manipulating content in an Angular directive?

javascript

service

controller

directive

angularjs