AngularJs - Calling controller function from directive

Question

In an angularjs project I am using a directive to upload files by drag/dropping them in a dropzone. In the directive I need to call a function that is defined within my controller.

Here is what I am doing:

(function () {
'use strict';

angular
    .module('app')
    .controller('myController', myController)
    .directive('fileDropzone', function () {
        return {
            restrict: 'A',
            scope: {
                file: '=',
                fileName: '=',
                test: '&callbackFn',
            },
            link: function (scope, element, attrs) {
                var  processDragOverOrEnter;
                processDragOverOrEnter = function (event) {
                    if (event != null) {
                        event.preventDefault();
                    }
                    event.dataTransfer.effectAllowed = 'copy';
                    return false;
                };
                element.bind('dragover', processDragOverOrEnter);
                element.bind('dragenter', processDragOverOrEnter);
                return element.bind('drop', function (event) {
                    var file, reader;
                    if (event != null) {
                        event.preventDefault();
                    }
                    reader = new FileReader();
                    reader.onload = function (evt) {
                        console.log(reader.result);

                        scope.test({});
                    };
                    file = event.dataTransfer.files[0];
                    reader.readAsText(file);
                    return false;
                });
            }
        };
    });

    function myController()
    {
         var vm = this;

         vm.test = function () {
           console.log("It works !");
         };
    }
})();

html file:

<div class="container">
    <md-content file-dropzone layout="column" layout-align="center center" class="md-list-item-text" md-whiteframe="1" style="padding:1em;margin:0.5em 0.5em;" flex>
        File drop zone
    </md-content>
</div>

While the console.log(reader.result) instruction does display the file content in the console, the message "It works !" is not shown, which means the function test() is never called.

What am I doing wrong ?

Answer 1

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

app.controller("Ctrl", function ($scope) {
  $scope.test = function () {
   console.log("Hi you called ctrl function");
  };
  $scope.param = function(name){
  console.log("My name is " + name);
  }
  $scope.testing = function(role){
  console.log("I'm a "+ role);
  }
});

app.directive("testDir", function () {
  return {
    scope: {
      test: "&callFuc",
      param:"&withparam",
      testing:"&"
    },
    template: `<button ng-click="test()">Call Test!
               </button>
               <button ng-click="param({name:'Mani'})">With param!
               </button>
               <button ng-click="clickHere()">Click Me!
               </button>`,
    link:function(scope){
        scope.clickHere = function(){
            scope.testing({msg:"Javascript Developer"});
        };
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="exApp">
  <div ng-controller="Ctrl">
    <div test-dir call-fuc="test()" withparam="param(name)" testing="testing(msg)"></div>
  </div>
</div>

This example is without parameter;

   scope: {
                file: '=',
                fileName: '=',
                test: '&',
            }

<a ng-click="test()">Call test</a> // in directive

<md-content file-dropzone layout="column" test="vm.test()"
            layout-align="center center" class="md-list-item-text"
            md-whiteframe="1" style="padding:1em;margin:0.5em 0.5em;" 
            flex>
   File drop zone
</md-content>

Answer 2

You can access the directive controller by specifying the fourth variable in link function.

Updated Link function:-

link: function (scope, element, attrs, ctrl) {
  console.log(ctrl.test());
}

Answer 3

You need to pass ctrl as fourth parameter inside link function.