javascript - Angular 1.5 组件与子组件的特定实例进行通信？

Question

我对 Angular 很陌生，有一种特殊情况我不明白如何建模。

我有一个主要组件:

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 Controller 的方法在某些时候需要为 foo map 调用 addMarker，而在其他时候则需要调用 addMarker 用于 bar map 。

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

Answer 1

我要么设置一个带有服务的发布/订阅，要么在父级上执行 $rootScope.$emit('nameOfInstance', message) 子实例将通过 $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
   })
}