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控制器的方法需要在某些addMarker為foo map調用addMarker ，而在其他時候則需要為bar調用addMarker 。

父組件與子組件的特定實例通信的最佳實踐是什么？

Answer 1

我要么使用服務來設置發布/訂閱，要么在父項上執行$ rootScope。$ emit（'nameOfInstance'，message），而子實例通過$ rootScope。$ on（'nameOfInstance'，function （信息）{}）

<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
   })
}