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

Question

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!

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

Answer 1

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

Answer 2

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
        }
      };
    }
    });

Answer 3

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>