Angular 1.5組件與子組件的特定實例進行通信？

Question

我對Angular真的很陌生，有一種特殊情況我不明白如何建模。

我有一個main組件：

angular 
    .module('synthApp') 
    .component('main', { 
    templateUrl: 'app/components/main.template.html', 
    controller: MainController 
    }); 

function MainController() { 
    ... 
} 

其main.template.html文件包含另一個組件我有兩個實例，該map組件：

<div> 
    ... 
    <map name="foo"> 
    ... 
    <map name="bar"> 
    ... 
</div> 

的map組件看起來是這樣的：

angular 
    .module('synthApp') 
    .component('map', { 
    templateUrl: 'app/components/map.template.html', 
    controller: MapController, 
    bindings: { 
     name: '=' 
    } 
    }); 

function MapController() { 
    var $ctrl = this; 

    $ctrl.addMarker = function(coords, classId, popupMarkup) { 
    ... 
    }; 

    $ctrl.removeMarkers = function() { 
    ... 
    }; 
} 

main控制器的方法需要在某些點爲foo map調用addMarker，而在其他點需要調用addMarker爲bar映射。

父組件通信到子組件的特定實例的最佳做法是什麼？

Answer 1

我要麼建立一個帶有服務的pub/sub，要麼做一個$ rootScope。$ emit（'nameOfInstance'，message）對父 和一個子實例將通過$ rootScope設置一個監聽器$ on 'nameOfInstance'，函數（消息）{}）

<div> 
    ... 
    <map name="foo" event-name="instance1" > 
    ... 
    <map name="bar" event-name="instance2" > 
    ... 
</div> 

而在組件只需添加：

bindings: { 
     name: '=', 
     eventName : '@' 
    } 

function MapController(){ 
    var $ctrl = this; 
    $rootScope.$on($ctrl.eventName, function(dataFromParent) { 
    // do stuff based on message 
    }) 
}