Angular.js: element.controller not working

[samu]

We have the following test code:

$scope = $rootScope.$new()
element = angular.element("<div directive-under-test=''/>")
$compile(element)($scope)
controller = element.controller("directiveUnderTest")

As you can see, we want to access the directive's controller through element.controller. This works fine with angular v1.3.0-beta.11. However, when using v1.3.13, the result of that call is an empty object. Calling the method with an invalid directive name returns undefined. We use jQuery 1.11.1 too.

[Narretz]

You'll have to provide a runnable example, I can't reproduce this in a simple example: http://plnkr.co/edit/sNm91HuYA8HrCjGWbeW6

[Narretz]

Closing until more info is provided.

[samu]

@Narretz we are using a couple of frameworks (jasmine, sinon). I tried to reproduce the problem in a test setup, without sucess. We are also using a test runner used in rails development called teaspoon, it's possible that this is causing the problem. Thanks for your efforts anyways.

[jinkai]

I've been able to reproduce this. We're also using AngularJS 1.3.13. If you update your plnkr's app.js to be:

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

app.controller('MainCtrl', function($scope, $compile) {
  $scope.name = 'World';

  var element = angular.element('<directive-under-test="" name="name"/>')
  $compile(element)($scope)
  var controller = element.controller("directiveUnderTest")

  console.log(controller);
})
.controller('ControllerTwo', function() {

})

.directive('directiveUnderTest', function() {
  return {
    scope: {
      name: '='
    },
    replace: true,
    controller: 'ControllerTwo',
    controllerAs: 'ctrlTwo',
    bindToController: true
  }
});

then you'll get undefined for the controller. I apologize for the paste here, I haven't used plnkr yet, and wanted to get this comment out here right away.

I have a module with 5 or so directives, all like what I've listed above, and I'm trying to unit test by compiling the directive and verify my controller has the correct bound properties / expressions.

[gkalpak]

@jinkai, this is because you are using invalid markup: '<directive-under-test="" ... />'
If you change it to '<directive-under-test ... />' it works as expected.

_{That said, this is a support question and as such ill-suited for GitHub (which is reserved for bug-reports/feature-requests).
In the future, please, forward such questions to one of the appropriate support channels.}

[jinkai]

@gkalpak Thanks! That change does indeed fix the plnkr, but in my unit tests, I'm still getting undefined, after verifying I had the correct syntax. This must be an issue with my test setup then, and I'll continue trying to get it working there.

Sorry to raise a false alarm.

[moanrose]

I also get undefined when calling element.controller()

But the issue appear only to occur when the directive template is externalized using templateUrl, id i use an inline template i get a reference to the controller instance just fine

EDIT: When calling element.controller() on a directive with an externalized template though shall call $scope.$digest() before trying to obtain a reference to the controller!

[svkoti]

Even with angular 1.6.1 version I was facing this issue whether I use template or templateUrl?
beforeEach(inject(function($compile, $rootScope) {
var el = angular.element('');
$compile(el)($rootScope.$new());
$rootScope.$digest();
controller = el.controller("testDirective");
scope = el.isolateScope() || el.scope();
}));

[petebacondarwin]

@svkoti : angular.element(''); why would you expect this empty element to contain your controller?