CODEWITHSUNDEEP
javascriptangularjs
Ms.Smith
Ms.Smith

Reputation: 483

Angular 1.5. | invoke a function from parent component clicking on child component?

In my app with angular 1.5 there are two components. A parent one:

angular.
module('myApp').
component('myContainer', {
    bindings: {
        saySomething: '&'
    },
    controller: ['$scope', function MyController($scope) {
        var containerCtrl = this;
        containerCtrl.saySomething = function saySomething() {
            containerCtrl.sentence = "Hello, world";
            console.log(containerCtrl.sentence);
        };
    }]
});

And a child one:

angular.
module('myApp').
component('myButton', {
    bindings: {
        onClick: '&'
    },
    template:
    '<div>' +
        '<a class="button" href="#">Say Something</a>' +
    '</div>'
});

And here is my index.html:

<my-container>
    <my-button ng-click="$ctrl.saySomething()"></my-button>
</my-container>

The question is: how to invoke the function saySomething() from the parent component by clicking on the button in the child component? Now it doesn't work. I've seen a similar question here but this didn't solve my problem. Thanks in advance for the help!

P.S. If there are any similar questions, please, let me know. Tnanks!

Upvotes: 3

Views: 5475

Answers (3)

Jazzy
Jazzy

Reputation: 77

I'm late to the party but i think there's a better way to handle that, here's a small example:

(function() {
    var app = angular.module('app');
    app.component('reportPrintButton', {
        template: [
            '<button class="btn btn-info" ng-click="$ctrl.onClick()">',
                '<span class="glyphicon glyphicon-print"></span> {{ $ctrl.name }}',
            '</button>'
        ].join(''),
        bindings: {
            name: '@',
            onClick: '&'
        },
        controller: reportPrintButton
    });

    reportPrintButton.$inject = [];

    function reportPrintButton() {
        var ctrl = this;
    }
})();

// On view use it like this where in the on-click attribute use the function
// you want to trigger from parent component
<report-print-button name="Complete" on-click="printReport('Complete')">
</report-print-button>

Upvotes: -1

Aleksey L.
Aleksey L.

Reputation: 37928

You can require parent controller in child component and then invoke its methods. 

angular.module('demoApp', [])
  .component('myContainer', {
    ...
  })
  .component('myButton', {
    require: {
      parentCtrl: '^myContainer'
    },
    template: '<div>' +
      '<a class="button" href="#" ng-click="$ctrl.parentCtrl.saySomething()">Say Something</a>' +
      '</div>'
  });

Here's a demo

And link to documentation

Upvotes: 6

elasticrash
elasticrash

Reputation: 1221

the thing is though that it only works for one way binded values

   mod.component('myCmp', {
      template: '<h1>{{$ctrl.name}}</h1>',
      bindings: {
        name: '<'
      },
      controller:  {
      this.$onChanges = function (changesObj) {
        if (changesObj.name) {
         ...fire some function
        }
      };
    }
    });

Upvotes: 2

Related Questions