Question

我有一个支持HTML5 Canvas可视化的指令。该指令具有多种方法来修改可视化的不同部分。问题是具有不同父/子/兄弟关系的多个控制器需要与此指令通信。现在我把这个非常糟糕的方式连接到指令的父控制器，然后将它们广播到指令。

我听说过使用服务来做这样的事情，但没有什么能解释原因。我想过用这样的东西：

angular.service('CanvasCommunication', function($rootScope) { 
   this.canvasAction = function() { $rootScope.broadcast('canvasAction'); };
}

然后在画布中让侦听器实际执行该操作。然后可以将此服务注入任何与画布通信的控制器。

这个问题是$ rootScope.broadcast（）的性能很糟糕，我想确保这个通信通道以最有效的方式构建。

是否有人处理过这样的事情并想到更好的事情？

Answer 1

我有同样的问题 - 控制器需要相互交互，应用程序的不同部分相互发送消息等。在我的项目中，我实现了一个MessageService。这是一个非常基本的版本（但老实说绰绰有余）：

module.factory('MessageService',
  function() {
    var MessageService = {};

    var listeners = {};
    var count = 0;
    MessageService.registerListener = function(listener) {
      listeners[count] = listener;
      count++;

      return (function(currentCount) {
        return function() {
          delete listeners[currentCount];
        }
      })(count);
    }

    MessageService.broadcastMessage = function(message) {
      var keys = Object.keys(listeners);

      for (var i = 0; i < keys.length; i++) {
        listeners[keys[i]](message);
      }
    }

    return MessageService;
  }
);

您可能希望为特定主题注册侦听器，并按主题过滤消息。我还会在主题上对消息进行排队，直到它们被清除为止，以便在加载新视图时可以查看消息（为了成对 - 成功 - 保存文件＆＃39;页面更改）

在多个控制器和指令之间进行通信

1 个答案: