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，而在另一些点，它需要为bar映射调用addMarker。

父组件与子组件的特定实例通信的最佳实践是什么？

Answer 1

我要么使用服务设置发布/订阅，要么在父级上执行 $rootScope.$emit('nameOfInstance'，消息(子实例将通过 $rootScope.$on('nameOfInstance'， function(message({}( 设置侦听器

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