I'm trying to make my directive call the parent's controller function. Here is an example of my directive:
HTML:
<div ng-app="myapp" ng-controller="mainController as mainCtrl">
some body text<br>
<a href="javascript:;" ng-click="mainCtrl.myfunc()">Click Me from body</a>
<photo photo-src="abc.jpg" caption="This is so Cool" />
</div>
Javascript:
var app = angular.module('myapp',[]);
app.controller('mainController', function(){
var vm = this;
vm.myfunc = myfunc;
function myfunc(){
console.log("Log from myfunc");
}
});
app.directive('photo',function(){
return {
restrict: 'E',
template: '<figure> <img ng-src="{{photoSrc}}" width="500px"> <figcaption>{{caption}}</figcaption> <a href="javascript:;" ng-click="mainCtrl.myfunc()">Click Me</a></figure>',
replace: true,
scope: {
caption: '@',
photoSrc: '@'
}
}
});
While clicking on Click Me from body link displays the console log message, clicking on Click Me from directive does not trigger any action. How can I resolve this issue?