如何从一个模块发送消息到另一个模块?

时间:2015-12-08 17:01:23

标签: angularjs messages

角度是否有任何用于模块间通信的集成解决方案? 如何将数据从一个模块发送到另一个模块?也许有一些eventloop?

2 个答案:

答案 0 :(得分:4)

我会有一个共同的模块,你的两个通信模块将依赖。 公共模块将通过公开可以向侦听模块发出和广播事件的service来提供Mediator模式的实现。请参阅$emit$on$broadcast

我个人喜欢利用“隐藏”事件,以便将事件广播和处理封装在服务内部。您可以阅读有关此技术的更多信息here

示例服务实施:

angular.module('app.core').factory('NotifyService', function($rootScope) {
    return {
        onSomethingChanged: function(scope, callback) {
            var handler = $rootScope.$on('event:NotifyService.SomethingChanged', callback);
            scope.$on('$destroy', handler);               
        },
        raiseSomethingChanged: function() {
            $rootScope.$emit('event:NotifyService.SomethingChanged');
        }
    };
});

确保您的模块依赖于app.core

angular.module('module1', ['app.core']);
angular.module('module2', ['app.core']);

服务使用示例:

angular.module('module1').controller('SomeController', function($scope, NotifyService) {
    NotifyService.onSomethingChanged($scope, function somethingChanged() {
        // Do something when something changed..
    });
});

angular.module('module2').controller('SomeOtherController', function($scope, NotifyService) {

    function DoSomething() {
        // Let the service know that something has changed, 
        // so that any listeners can respond to this change.
        NotifyService.raiseSomethingChanged();
    };
});

答案 1 :(得分:0)

为了以“呼叫功能”而不是“发送事件”的方式实现双向通信,可以使用服务来实现。诀窍是避免两个模块相互需求-这是不允许的。

相反,有效的配置如下所示:

  • 模块B需要模块A
  • 这使模块A中的服务可以自然地(按角度)插入模块B中的功能。这很容易。
  • 模块A中的功能无法注入模块B中的服务,但是...
  • 可以在模块A中定义一个存根服务(因此可以访问同一模块中的功能),并在模块B中“修饰”它们(实际上是实现它们)。

与基于事件的通信不同,这是一种非对称通信模式,它允许接口(模块A中定义的服务)与实现(模块B中相同服务的修饰版本)之间的耦合。 >

模块A可以通过以下方式实现:

// The module itself
angular.module("ModuleA", [])

// A stub service (optional: define "un-decorated" implementation)
.service("someService", function(){
    return {};
})

// Any controller or other function invoking the service
.controller(someController, ["someService", function(someService){
    someService.usefulFunction();
}])

模块B可以通过以下方式实现:

// The module itself
angular.module("ModuleB", ["ModuleA"])

// Decorate the service in the other module
.decorator("someService", [function(){
    return {
        usefulFunction: function(){
            // Implement function here
        }
    };
}])

备注:

  • 可以用$ delegate注入装饰器函数,但这不是必需的,只要模块B提供了模块A中服务的完全替换即可。
  • 此外,装饰器函数可以从模块A或B注入任何服务(不仅仅是提供者!),因此对于实际的服务实现没有特别的限制,它可以基本上依赖AngularJS环境中的任何内容。 / li>