calling a controller function from a link in a directive

Question

I'm writing an Angular 1.5.0-beta2 project.

I want to call a controller function from the link property of the returned object.

which means...

angular.module('myalcoholist').directive("ngFileSelect",function() {

    return {
        controller: 'AddCoctailController',
        controllerAs: 'addCocktail',
        link: function ($scope, el) {

            el.bind("change", function (e) {

                var file = (e.srcElement || e.target).files[0];
/*THIS DOES NOT WORK */      addCocktail.getFile(file);
            })

        }

    }
});

as you can see here i'm trying to run a controller function called getFile.

is it even possible ?

yes. i'm adding the functions to the controller, not the scope — ufk, Dec 09 '15 at 14:42

Gonzalo Pincheira Arancibia · Accepted Answer · 2015-12-09T15:18:26.190

If you use a angular >= 1.3, use bindToController option

angular.module('myalcoholist').directive("ngFileSelect",function() {

    return {
        controller: 'AddCoctailController',
        controllerAs: 'addCocktail',
        bindToController: true,
        link: function (scope, el) {

            el.bind("change", function (e) {

                var file = (e.srcElement || e.target).files[0];
                scope.addCocktail.getFile(file);
            });

        }

    }
});

codepen: http://codepen.io/gpincheiraa/pen/VeYxGN

score 2 · Answer 2 · edited May 23 '17 at 12:09

2

Controller is to populate $scope and link is running after controller so you can just access whatever is on your scope in link function.

angular.module('app', [])
  .directive('tstDrv', function () {
      return {
          restrict: 'E',
          template: '<div>{{hello}}</div>',
          link: function (scope) {
              console.log(scope.hello);
              scope.hello = "hello again";
          },
          controller: function ($scope) {
              $scope.hello = 'tst';
          }
      }
  })

Also this SO question is related Angular: calling controller function inside a directive link function using &

If one wants to access a scope property that has been defined outside of current directive scope it all depends on scope property of 'Domain Definition Object'.

Ref. https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

edited May 23 '17 at 12:09

Community

1
1

answered Dec 09 '15 at 14:40

Chris Hermut

1,708
3
17
32

is there a way to run functions from the controller without using $scope ? – ufk Dec 09 '15 at 14:42
thanks for the input but that doesn't quite answer my question. maybe it's not possible but i'm wondering if i can call a function from the parent controller or to set a variable in the parent controller – ufk Dec 09 '15 at 14:51
You did not mention that you want to get a hold on $parent from that directive. Let me update my answer then. – Chris Hermut Dec 09 '15 at 14:55

score 2 · Answer 3 · answered Dec 09 '15 at 14:55

2

Adding to Chris's answer above - link has several parameters (scope, element, attrs, controller). You can access the attached controllers functions doing the following:

link: function(scope, elem, attrs, ctrl){
    ctrl.func_to_call();
}

answered Dec 09 '15 at 14:55

Katana24

8,706
19
76
118

calling a controller function from a link in a directive

3 Answers3