javascript - How to triger function in child component from parent component in AngularJS? -

by using & binding in child component can run function part of parent components controller. strugling same in oposite direction - when happens in parent component, child component runs function.

i have mapcomponent direct child of maincomponent. mapcomponent displays fullscreen google map(using ngmap) markers. maincomponent handles login , registration. if users start registration need run function in mapcomponent removes markers , attaches map event user click on map show lives , coordinates saved on registration.

just example wouldnt complex, here code plunker found while searching stackoverflow:

var app = angular.module('plunker', []);  app.controller('rootcontroller', function() {});  app.component('parentcomponent', {   template: `     <h3>parent component</h3>     <a class="btn btn-default btn-sm" ng-click="$ctrl.click()">notify child</a>     <span data-ng-bind="$ctrl.childmessage"></span>     <child-component on-change="$ctrl.notifiedfromchild(count)" message="$ctrl.message"></child-component>   `,   controller: function() {     var ctrl = this;     ctrl.notifiedfromchild = function(count) {       ctrl.childmessage = "from child " + count;     }     ctrl.click = function() {       ctrl.message = math.random()     }   },   bindings: {} });  app.component('childcomponent', {   template: `     <h4>child component</h4>     <a class="btn btn-default btn-sm" ng-click="$ctrl.click()">notify parent</a>     <span>{{$ctrl.parentmessage}}</span>   `,   controller: function() {     var ctrl = this;     ctrl.counter = 0;     ctrl.click = function() {       ctrl.onchange({         count: ++ctrl.counter       });     }   },   bindings: {     onchange: '&',     parentmessage: '<message'   } }); 

in example clicking button in parent component can change parentmessage value in child component through data binding. want find way child component change value byself when parent component asks it.

one possible solution create register function in parent this:

ctrl.register = function(child){     ctrl.childctrl = child; } 

and use regular callback binding pass register function child, , have child call it. this:

app.component('childcomponent', {     bindings: {         registerparent: '&'     }     controller: function() {         var ctrl = this;          // register child controller parent.         ctrl.registerparent({childref: ctrl});          ctrl.childfunction = function(message) {             console.log('child function: ' + message);         }     },     // ...and on }); 

then pass through template

<child-component register-parent="$ctrl.register(childref)" /> 

after can use childref variable call function of child controller parent. instance in parent this:

ctrl.childref.childfunction("called parent") 

and should log following console: child function: called parent

i've created plunker show working.