In my Angular 1.5 app, I have two components. The first one is the parent:
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);
};
}]
});
The second component is the child:
angular.
module('myApp').
component('myButton', {
bindings: {
onClick: '&'
},
template:
'<div>' +
'<a class="button" href="#">Say Something</a>' +
'</div>'
});
Below is how I implemented it in my index.html:
<my-container>
<my-button ng-click="$ctrl.saySomething()"></my-button>
</my-container>
My question is: How can I trigger the function saySomething() from the parent component when clicking on the button in the child component? Currently, it's not working as expected. I've checked a similar question here but it didn't provide a solution to my issue. Thank you in advance for your assistance!
P.S. If there are any related questions or solutions available, please do share. Thank you!