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 ?

as you have created isolated scope then where you are using directive inside of any controller there you will get instance of it use ctrl as fourth parameter of link function — Jayant Patil
– Jayant Patil, Commented May 29, 2017 at 9:53
you have missed to add callback-fn="vm.test()" in directive element at html file — selvakumar
– selvakumar, Commented May 29, 2017 at 10:18

georgeawg · Accepted Answer · 2017-06-20 07:44:41Z

18

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>

edited Jun 20, 2017 at 7:44

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered May 29, 2017 at 10:11

Manikandan Velayutham

2,2281 gold badge17 silver badges22 bronze badges

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

2 Comments

Hal Over a year ago

After further testing this is the only solution that worked for me, thanks.

biko Over a year ago

This answer needs more love

Ajay · Accepted Answer · 2017-05-29 09:53:42Z

-1

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());
}

answered May 29, 2017 at 9:53

Ajay

5,0013 gold badges28 silver badges39 bronze badges

6 Comments

Ajay Over a year ago

Please add comment before downvoting an answer. It will be helpful in future answers

Hal Over a year ago

I have not downvoted the answer, but it does not work for me. I have the following error: "Cannot read property 'test' of undefined". If I try to display ctrl in the console it indeed shows "undefined".

Ajay Over a year ago

@Hal, I was asking to those person who were downvoting this answer. Can you register myController as directive controller?

Ajay Over a year ago

By adding following key-value to directive object, we can create directive controller. return { controller: 'myController', controllerAs: 'ctrl', bindToController: true }; myController will only be accessible to this directive only. Refer blog.thoughtram.io/angularjs/2015/01/02/…

Hal Over a year ago

For some reason, adding the definition "controller" in the directive had impact on the rest of the solution and angular could not inject services into controllers anymore... I used Manikandan's solution and it worked.

|

Ahmer Khan · Accepted Answer · 2017-05-29 09:56:41Z

-2

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

answered May 29, 2017 at 9:56

Ahmer Khan

7771 gold badge10 silver badges31 bronze badges

Collectives™ on Stack Overflow

AngularJs - Calling controller function from directive

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related