angularjs: multiple binded functions in directive

Question

I have a function in my directive that is bound to a function in my controller as follows:

HTML:

<div graph-visualization data="graphdata" type="graphtype" data-method="watchMonth" timespan="timespan" id="graph" ng-if="!loading">
</div>

Directive:

app.directive('graphVisualization', function() {
    return {
        restrict: 'A',
        scope: {
          data: '=',
          type: '=',
          timespan: '=',
          monthFilter: '&method'
        },
        link: function(scope, element, attrs) {
            scope.updateMonth = function() {
                var func = scope.monthFilter();
                func(scope.month)
            }

            scope.$watchGroup(['data', 'timespan', 'type'], function(newval, oldval) {
                 scope.month = 'something'
                 scope.updateMonth()
            })
})

Controller:

$scope.watchMonth = function(value) {
    //handle value passed from directive
}

As you can see I have a binded function 'watchMonth' in my controller which is called from the directive. Now, I want to add another function in my directive which is binded to some other function in my controller. How do I go about it? Can't seem to get my head around it.

What I want is that I am handling a click in my directive and getting a value based on that click. Now, I want to pass this value to the controller which will modify 'graphdata'(on which I have supplied a watchgroup) in the controller.

Answer 1

In the html add the methods as shown: month-filter="watchMonth()" second-function="function()"

Be sure to add parentheses at the end of the function name

  <div graph-visualization data="graphdata" type="graphtype" month-filter="watchMonth()" second-function="secondFunction()" timespan="timespan" id="graph" ng-if="!loading">

app.directive('graphVisualization', function() {
return {
    restrict: 'A',
    scope: {
      data: '=',
      type: '=',
      timespan: '=',
      monthFilter: '&',
      secondFunction: '&'
    },
    link: function(scope, element, attrs) {
        scope.updateMonth = function() {
            var func = scope.monthFilter();
            func(scope.month)
        }

        scope.$watchGroup(['data', 'timespan', 'type'], function(newval, oldval) {
             scope.month = 'something'
             scope.updateMonth()
        })

})

added a plunker, maybe that'll help http://plnkr.co/edit/cISSlQpQF6lFQrDdbTg4?p=preview