多个控制器在一个Angular指令中操作内容

Multiple controllers manipulating content in an Angular directive?

本文关键字：指令 操作 Angular 控制器 一个      更新时间：2023-09-26

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

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

问题是，我想有一个服务或类似的东西，我可以注入到我的控制器。然后，我可以使用该服务上的方法来显示"警告框"和/或更改内容。

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

三个完美的方法:

  1. 使用angular的事件系统，rootScope.$broadcast或scope.$emit和scope.$on作为监听器，参见这里的文档:https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcasthttps://docs.angularjs.org/api/ng/type/rootScope.Scope #美元发出https://docs.angularjs.org/api/ng/type/rootScope.Scope #美元在

  2. 将服务注入到"alert box"指令中，让它以某种方式在服务中注册自己，这样服务就知道它的存在，可以直接控制指令的控制器，或者它的作用域，或者元素，或者你想用的任何逻辑。

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

编辑:我的目的不是向您展示如何以最通用和最干净的方式实现它，因为我不知道您的确切情况，您应该始终考虑您希望您的功能具有多通用和多抽象。这是一个非常非常简单的例子，它展示的不是找到一些复杂的系统或模式，而是找到一些适合你的东西

方法二示例: 
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 ]();
  }
}

我个人会使用method3从什么样的功能你正在寻找的外观，方法2可以是一个通用的公共订阅服务使用rootScope。$broadcast和scope。$on，或者干脆不用这些，直接把它们放到pubsub上去

方法1确实是最简单的方法，但显然将受益于抽象为服务，在每次需要非常具体的publicsub事件时注入服务。

发布/订阅模式的示例:发布/订阅设计模式angularjs service

相关文章：