<html>
<head>
<title>Shared service</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', ['$scope', function ($scope) {
$scope.numbers = [];
$scope.add = function(number) {
$scope.numbers.push("$scope.add " + number)
};
}]);
app.directive('adderbasic', function() {
return {
scope: { fun: "&" },
template:
"<h3>basic</h3>" +
"<button ng-click='fun({param: 123})'>call passed function</button>"
}
})
app.directive('adderadvanced', function() {
return {
scope: { fun: "&" },
template:
"<h3>advanced</h3>" +
"<input type='text' ng-model='somenumber'><br>" +
"<button ng-click='fun({param: somenumber})'>call passed function</button>"
}
})
</script>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
{{ numbers }}
<br>
<div adderbasic fun="add(param)"></div>
<div adderadvanced fun="add(param)"></div>
</div>
</body>
</html>