展開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組件之間的通信

回答

相關問題