展开AngularJS组件之间的通信

我们在应用程序中有不在父/子或兄弟关系中的各种组件。让我们说一个复选框，当处于选中状态时应该改变另一个完全不同容器中组件的状态。展开AngularJS组件之间的通信

该应用程序超过500个不同的视图，所以每个控制器不是一个选项。这些交互也是完全自定义的，所以我们需要数十种方法来覆盖所有这些（复选框到标签，多个复选框到标签，多个复选框到更多复选框等）。

这里的最佳做法是什么？到目前为止，我们考虑了一个全局可用的服务，通过id注册组件，然后订阅相关组件来监听服务中该特定ID的状态变化（例如在切换的ng-if指令中），或者使用Redux。我们之前没有像这样的复杂关系的经验。

任何想法或类似的经验将不胜感激。

来源

2017-09-24 shaggeh

您描述的观察者模式正在使用事件emmiters（$broadcast$emit）在angularjs中实现，因此不需要创建独立服务。

基于组件的应用程序的要点是有一些树型结构体系结构。所以在这些情况下，孩子组件通知父母，然后父母通知其他孩子可能会继续。

如果你的应用程序不是这样构造的，你可能会考虑重构，但现在你可以绑定一些事件发射器。

来源

2017-09-24 19:51:41 Korte

那么我基本上需要1个控制器的部分怎么知道如何处理发射事件呢？有没有办法让它们更通用，所以我可以从HTML模板中控制它们？ – shaggeh

要解决此问题，请使用publish/subscribe pattern，它允许获得松散耦合架构。

上的AngularJS应用一个伟大的图书馆是postaljs，允许实现了该模式easely：

定义在app.config，这将是对应用程序的所有地方入店一个$bus $范围变量：controlers，指令，...

app.config(function($provide) { 
    $provide.decorator('$rootScope', [ 
     '$delegate', 
     function($delegate) { 
      Object.defineProperty($delegate.constructor.prototype, 
       '$bus', { 
        get: function() { 
         var self = this; 
         return { 
          subscribe: function() { 
           var sub = postal.subscribe.apply(postal, arguments); 
           self.$on('$destroy', 
            function() { 
             sub.unsubscribe(); 
            }); 
          }, 
          channel: function() { 
           return postal.channel.apply(postal, arguments); 
          }, 
          publish: function() { postal.publish.apply(postal, arguments); } 
         }; 
        }, 
        enumerable: false 
       }); 
      return $delegate; 
     } 
    ]); 
});

发布
发布的产品的更新。

var channel = $scope.$bus.channel('myresources'); 
channel.publish("item.updated", data);

上发布列表来更新

var channel = $scope.$bus.channel('myresources'); 
.... 
channel.publish("list.updated", list);

订阅控制器/指令需要被通知用于对 “为MyResources” 信道的事件。

var channel = $scope.$bus.channel("myresources"); 
.... 
//The wildcard * allow be notified on item/list. updated 
channel.subscribe("*.updated", function(data, envelopment) { 
    doOnUpdated(); 
});

来源

2017-09-24 20:04:30 pdorgambide

展开AngularJS组件之间的通信

回答

相关问题