I am in the process of developing a directive to display variances in text. To achieve this, I require a couple of buttons that have been separated into directives. A simplified illustration is as follows:
.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
}
}
}
})
The HTML is compiled through 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>
Here, diffbutton is generated within the HTML compiled by differenceViewer.
I need to trigger a method in the controller responsible for creating all the difference views.
app.controller('MainCtrl', function($scope) {
$scope.clickedBtn = function() {
console.log('foo'); // is never called
}
})
This Plunker exemplifies the issue.
What adjustments do I need to make to successfully transmit the button click from my directive within another directive to the controller method?
I have explored solutions provided in this thread, but have not been able to resolve the issue.
It is important to note that adding
scope.clickedBtn = function() {console.log("bar");}
to the differenceViewer directive results in it being executed - however, I aim to invoke the method in the controller instead.