AngularJS Dependency Injection Fails in module

Question

i have a problem regarding the angular dependency injection mechanism. I have written a directive in a standalone module, that does some neat things on a datatable. I'm using TypeScript and my directive looks as follows:

export class MdListControls implements angular.IDirective {
  public templateUrl = "/app/templates/mdListControls.html";
  public static instance(): any {
    return new MdListControls();
  };

  public restrict = 'E';
  public transclude = true;
  public replace = true;
  public scope = {
    grid: '=',
  };
  public controller = "mdListControlsController"
  public controllerAs = "vm";

  public link = function (scope: angular.IScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) {

  };
}

My Controller looks something like this:

export class MdListControlsController { 
  static $inject = ['scope']
  constructor($scope: angular.IScope){
    //Setup the constructor
  }
  //Here goes the controller Logic
}

I'm registering the directive and the controller at a new module as follows:

angular.module("base.directives.mdListControls", [])
  .controller("mdListControlsController", MdListControlsController)
  .directive("mdListControls", function () { return MdListControls.instance() });

However, once I run the app, I get the following error once the directive shall be loaded:

Argument 'mdListControlsController;' is not a function, got undefined

This doesn't quite look like a problem with dependency injection at first. But when I register the controller on the application itself (which gets injected the "base.directives.mdListControls" Module) like so

app.controller("mdListControlsController", MdListControlsController);

everything works fine and the controller gets injected properly into the directive.

Does anyone know what I'm doing wrong here? Thanks for your help!

I don't know TypeScript but the problem is order of JS execution. MdListControlsController is not available when your controller is being registered as angular.module("base.directives.mdListControls", []) .controller("mdListControlsController", MdListControlsController) — Prashant
– Prashant, Commented Jan 19, 2016 at 14:02
I don't know TypeScript either. What happens if in your controller declaration you do .controller("mdListControlsController", function () { return MdListControlsController }) ? — Daniel Nalbach
– Daniel Nalbach, Commented Jan 19, 2016 at 14:04
Maybe a stupid question. But you seem to export MdListControlsController. Do you also import it at the top of your directive module file? — Daan van Hulst
– Daan van Hulst, Commented Jan 19, 2016 at 14:27
@DaanvanHulst: Both the MdListControls and the MdListControlsController classes lie wihtin the same typescript namespace, thus I don't need to import it. — hoffmax91
– hoffmax91, Commented Jan 20, 2016 at 15:07

�?лья�? Гариф�?ллин · Accepted Answer · 2016-01-19 14:04:59Z

0

In Your MdListControls class try to provide controller class, not controller name.

...    
public scope = {
    grid: '=',
  };
public controller = MdListControlsController
public controllerAs = "vm";
...

answered Jan 19, 2016 at 14:04

�?лья�? Гариф�?ллин

3781 silver badge10 bronze badges

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

1 Comment

hoffmax91 Over a year ago

Thanks for your hint. That obviously works, because the "injection" know happens on TypeScript level. But now angular does no dependency injection here at all. However, I guess I'll have to go with that solution.

Collectives™ on Stack Overflow

AngularJS Dependency Injection Fails in module

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related