AngularJS：从具有隔离范围的指令中调用控制器函数

Question

I have the following problem. I would like to call controller function from a directive with isolated scope.

HTML:

<div ng-controller="MainController">
   <test></test>
</div>

JS:

var app = angular.module("app", []);

app.controller("MainController", function ($scope) {
    $scope.testFunction = function () {
        console.log("You just call testFunction()!");
    };
});

app.directive("test", function () {
    return {
        restrict: "E",
        scope: {},
        template: "<h1 ng-click='testFunction()'>Hello world!</h1>"
    };
});

When directive don't have an isolated scope, the call function follows.

Working DEMO

Answer 1

You can pass the function to be called using & like

 var app = angular.module("app", []); app.controller("MainController", function($scope) { $scope.counter = 0; $scope.testFunction = function() { $scope.counter++; }; }); app.directive("test", function() { return { restrict: "E", scope: { myfn: '&myfn' }, template: "<h1 ng-click='myfn()'>Hello world!</h1>" }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="MainController"> <test myfn="testFunction()"></test> <span>{{counter}}</span> </div>