I need help with passing arguments from my directive to the caller. I've been struggling to make it work.
Currently, I am able to call the function without any arguments successfully. However, when I try to pass arguments, it stops working:
Here is the link to the Plunker: (http://embed.plnkr.co/autsgiBlWjz8cX2BL6Sj/preview)
To give you a better understanding, here is the code snippet:
// Code goes here angular .module('myApp', []);
angular
.module('myApp')
.directive('myDirective', myDirective)
.controller('ParentController', ParentController);
function myDirective() {
return {
restrict: 'E',
controller: {},
controllerAs: 'vm',
bindToController: {
myCallback: '&'
},
scope: {},
template: '<div><button data-ng-click="myCallback({msg:123})Call Callback</button></div>'
};
}
function ParentController() {
var self = this;
self.parentCallback = parentCallback;
function parentCallback(args) {
alert('The message is: ' + args.msg);
}
}
HTML content below:
<head>
<script data-require="angular.js@*" data-semver="2.0.0-alpha.45" src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="ParentController as ctrl">
<my-directive my-callback="ctrl.parentCallback(args)"></my-directive>
</div>
</body>
</html>