Clever Geek Handbook

Calling child component function from parent component in Angular 1.5

There is a nested component in my parent component template.

<div class="inner" ng-show="!vm.loading">
    <div class="info-panel">
        <h3 id="basePrice">Current Cost</h3>
        <p>
            <small>
                <a href role="button" data-toggle="modal" ng-click="vm.openCostsModal()">See Details</a>
            </small>
        </p>
    </div>
    ......
    ......
    <pricingcalculation></pricingcalculation>

This one <pricingcalculation></pricingcalculation>

is a nested component. And this definition looks like this:

(function () {
    "use strict";
    angular.module("app")
        .component("pricingcalculation", {
            transclude: true,
            templateUrl: "/static/angtemplates/pricing-calculation.html",
            controllerAs: "vm",
            controller: ["$rootRouter", function ($rootRouter) {
                var vm = this;
                vm.openCostsModal = function () {
                    vm.costItems = [];
                    vm.projectedCostItems = [];
                    vm.totalOfCostItems = 0;
                    .....
                    .....

So on this button See Details

click which is defined in the parent template

I want the child component's openCostsModal () function to be called .

How to do it?

+3


source to share


1 answer


You can use $broadcast

in your parent to broadcast the event and use $on

in your child to listen to it.

Same:

In the parent:



$scope.$broadcast("someEvent");

The child has:

$scope.$on("someEvent",function(){
  //do stuff here
});
+4


source






More articles:


All Articles