Call function from directive without isolated scope - angularjs

Question

I have read this post. However, in that example he calls the controller function after listening on a click event of the element.
How can I achieve calling a controller function when clicking children of the directive element?
<div ng-controller="MyCtrl">
<abc method1="outerMethod('c')" method2="outerMethod2('g')"></abc>
</div>
Directive:
var myApp = angular.module('myApp',[]);
myApp.directive('abc', function() {
return {
restrict: "EA",
replace: true,
template: "<div><p ng-click='clickedP()'>p</p><div ng-click='clickedDiv()'>div</div></div>",
controller: function($scope) {
// how can I call outerMethod if clickedP is executed???
// how can I call outerMethod2 if clickedDiv is executed???
},
controllerAs: "vm",
link: function(scope, element, attrs, vm) {
}
}
});
function MyCtrl($scope) {
$scope.outerMethod = function( a ) {
alert( "you did it" );
}
$scope.outerMethod2 = function( a ) {
alert( "you did it again" );
}
}
Fiddle: http://jsfiddle.net/j93ba7a2/5/

Answer 1

The scope can be used directly without passing attributes. Also, using "controllerAs" on a directive with the same value as the parent controller is a bad idea, since it will overwrite it.
Solution:
var myApp = angular.module('myApp', []);
myApp.directive('abc', function () {
return {
restrict: "EA",
replace: true,
template: "<div><p ng-click='clickedP()'>p</p><div ng-click='clickedDiv()'>div</div></div>",
controller: function ($scope) {
// how can I call outerMethod if clickedP is executed???
$scope.clickedP = function () {
$scope.outerMethod(); // you just call it!
}
// how can I call outerMethod2 if clickedDiv is executed???
$scope.clickedDiv = function () {
$scope.outerMethod2(); //Same way!
}
},
controllerAs: "vm",
link: function (scope, element, attrs, vm) {
/* It would have been better to handle clickedP and
clickedDiv here instead of in the controller, but I'm
trying to avoid confusion by changing as little as
possible of your code. */
}
}
});
function MyCtrl($scope) {
$scope.outerMethod = function (a) {
alert("you did it");
}
$scope.outerMethod2 = function (a) {
alert("you did it again");
}