angularjs: access controller of directive

Question

I'm unit testing one of my directives. Its basic structure is like this

angular.module('MyApp')
.directive('barFoo', function () {
    return {
        restrict: 'E',
        scope: {},
        controller: function ($scope, $element) { 
              this.checkSomething = function() { .... }
        },
        link: function(scope, element) { .... }
    }
});

In my unit test I want to test the function 'checkSomething', so I tried

var element = $compile('<barFoo></barFoo>')(scope);
var controller = element.controller()
...

However, controller is undefined. Is it possible to access the controller of the directive ?

bresleveloper · Accepted Answer · 2013-12-16 09:28:10Z

1

the glue is your scope so you can do

controller: function ($scope, $element) { 
  this.checkSomething = function() { .... }
  $scope.controller = this;                
},

but i think it would be best practice to attach every function to the scope like

controller: function ($scope, $element) { 
  $scope.checkSomething = function() { .... }
},

and then its

var element = $compile('<barFoo></barFoo>')(scope);
var checksomthingResult = scope.checkSomething ()

answered Dec 16, 2013 at 9:28

bresleveloper

6,0743 gold badges35 silver badges50 bronze badges

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

2 Comments

Jeanluca Scaljeri Over a year ago

I wonder if attaching everything to the scope might influence performance. Or are only $scope properties checked/monitored which are bind/$watched ?

Oliver Over a year ago

Not all of them. Only those which you have a $watch expression or a binding on them.

Collectives™ on Stack Overflow

angularjs: access controller of directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related