AngularJS How to call directive function from controller

Question

I was looking for a way to find out how to call a function inside a directive from the controller. I got the snip but hence I am new to Angular, the below code flow is not very clear. Anyone mind to explain how the code is working. Thanks.

// Directive 
<map set-fn="setDirectiveFn(theDirFn)"></map>

scope: { setFn: '&' },
link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});
}

// Controller
<button ng-click="directiveFn()">call directive function</button>
function MyCtrl($scope) {
    $scope.setDirectiveFn = function(directiveFn) {
        $scope.directiveFn = directiveFn;
    };
}

Answer 1

Starting with the controller, this block creates a setDirectiveFn() method on the $scope object in your controller that takes a single parameter (directiveFn) and then uses that parameter to create a directiveFn() method on the $scope object in your controller.

    $scope.setDirectiveFn = function(directiveFn) {
        $scope.directiveFn = directiveFn;
    };

Inside the directive it is creating an updateMap() method on the scope object in the directive and then calling the setFn() method which is mapped to the $scope.setDirectiveFn() method by this line: <map set-fn="setDirectiveFn(theDirFn)"></map> in your HTML and this line: scope: { setFn: '&' } in your directive. It is passing the scope.updateMap() method which effectively sets $scope.directiveFn() in your controller equal to scope.updateMap() in your directive.

link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});
}

The button is then calling $scope.directiveFn() in your controller which has been mapped to scope.updateMap() in your directive.

<button ng-click="directiveFn()">call directive function</button>