하위 구성 요소의 특정 인스턴스와 통신하는 각도 1.5 구성 요소?

Question

저는 Angular에 처음으로 익숙합니다. 모델 작성 방법을 이해하지 못하는 특별한 상황이 있습니다.

은 내가 main 구성 요소가 :

그 main.template.html 파일이 내가 가진 또 다른 구성 요소의 두 인스턴스를 포함

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

function MainController() { 
    ... 
} 

의 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

나는 서비스를 사용하여 pub/sub를 설정하거나 $ root_scope을 실행합니다. 에 $ emit ('nameOfInstance'메시지)가 있고 자식 인스턴스는 $ 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 
    }) 
}