angular.module('myApp', [])
.directive('demoCommunication',[ function () {
return {
//Define 3 inputs and 1 button. The button click call the btnCliked function defined in directive controller
template : '<input ng-model="paramValue1" type="text" placeholder="param 1"/><br>' +
'<input ng-model="paramValue2" type="text" placeholder="param 2"/><br> ' +
'<input ng-model="paramValue3" type="text" placeholder="param 3"/><br> ' +
'<button ng-click="btnClicked()">click me</button>',
scope: {
demoOnClick: '&'
},
restrict: 'E',
link: function ($scope, $element, $attrs) {
},
controller: function ($scope) {
$scope.btnClicked = function () {
//Call controller function with params as Object
$scope.demoOnClick(
{
param1 : $scope.paramValue1,
param2 : $scope.paramValue2,
param3 : $scope.paramValue3
});
};
}
};
}]
).controller('DemoCtrl', function ($scope) {
//Define directive callback. Only 1 param is used.
$scope.clickHandler = function (param) {
$scope.callParam = param;
};
});
<div ng-app="myApp" ng-controller="DemoCtrl">
<!-- WARNING : parameters must match params property name. Here only param 2 is used -->
<demo-communication demo-on-click="clickHandler(param2)" ></demo-communication>
<div ng-if="callParam">called with param {{callParam}}</div>
</div>