angular directive in directive parent click

Question

I'm creating a directive to show differences in text. For this directive, I need a couple of buttons which I've split up in directives. A simpliefied example would be:

.directive('differenceViewer', function($templateCache, $compile) {
      return {
        restrict: 'E',
        scope: {
            oldtext: '@',
            newtext: '@',
            template: '@',
            heading: '@',
            options: '=',
            itemdata: '&',
            method: '&'
        },
        replace: false,
        link: (scope, element, attr) => {
            element.append(angular.element($compile($templateCache.get(scope.template))(scope)));
        }
    };
}).directive('diffbutton', function() {
  return {
        restrict: 'E',
        scope: {
            method: '&'
        },
        template: '<button class="btn btn-sm btn-success" ng-click="method()">Rollback</button>',
        replace: true,
        terminal: true,
        link: (scope, element, attr) => {
            scope.directiveClick = function(){
                console.log("directive method"); // is never called
            }

        }
    }
})

I compile the html via a template script:

<script type="text/ng-template" id="differenceViewer.html">
    <div class="ibox-footer">
      <div class="row">
        <div class="col-md-12">
            <diffbutton method="clickedBtn()">Foo</diffbutton>
        </div>
      </div>
    </div>
</script>

Where the diffbutton is created inside the html compiled by differenceViewer .

I need to call a method in the controller that is responsible for creating all the difference-views.

app.controller('MainCtrl', function($scope) {
  $scope.clickedBtn = function() {
    console.log('foo'); // is never called
  }
})

Here's a plunker demonstrating the issue.

What do I need to change in order to be able to forward the button click on my directive in a directive to the controller method?

I've been working with the answers of this question but still can't make it work.

Note that, if I add

scope.clickedBtn = function() {console.log("bar");}

to the differenceViewer directive, it gets called - however I need to call the method in the controller instead.

Answer 1

Pass on a method from the parent to the child element and then trigger it on click. For example (pseudo code coming in )

<parent-directive>
   <child-directive totrigger="parentClickCallback()"></child-directive>
</parent-directive>

then in your parent directive you set

$scope.parentClickCallback = function(){//do whatever you neeed}

and on your child in its scope binding you set

scope:{
   totrigger:'&'
}

and on that child button you simply add

<button ng-click="totrigger()">ClickMe</button>

every time you click that button it will trigger parentClickCallback by reference attached to totrigger.

Why would you need to complicate your code so much I'm not really sure. If you not happy with scope binding just require controller in your directive and pass the controller bound function.