AngularJS : Call controller function from a directive with isolated scope

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

Arun P Johny · Accepted Answer · 2014-10-15 10:52:30Z

4

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>

answered Oct 15, 2014 at 10:52

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS : Call controller function from a directive with isolated scope

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related