AngularJS Unknown provider - For Controllers

Question

I know that there are a lot of these question, but my is specific. I am using Typescript with AngularJS. I want to get variable from multimediaController to multimediaAlbumController. I am getting "[$injector:unpr] Unknown provider: multimediaControllerProvider <- multimediaController <- multimediaAlbumController". How can i prevent it?

MultimediaAlbumController

export class MultimediaAlbumController{
    $scope;
    albums        : AlbumDto[];
    $popupManager;
    $state;
    $element;
    mutlimediaController;
    static $inject = ['$injector', '$scope', '$stateParams', '$state', '$popupManager', '$element','multimediaController']
    constructor(
            $injector         : ng.auto.IInjectorService,
            $scope,
            $stateParams,
            $state,
            $popupManager,
            $element,
            mutlimediaController: MultimediaController
        ) {
        super();
        $injector.invoke(this.init, this, {$scope});
        this.$scope = $scope;
        this.$element = $element;
        this.$state = $state;
        this.$popupManager = $popupManager;
        this.mutlimediaController = MultimediaController;
        this.albums = mutlimediaController.albums;
}

As you can see i have declared multimediaController, even write it in $inject. So where is the bug? :/

Answer 1

You should not inject one controller into another rather you should be using service\factory.

However to get the scope of mutlimediaController, you need to inject $controller service of angularjs. You can do it ike :

static $inject = ['$injector', '$scope', '$stateParams', '$state', '$popupManager', '$element','$controller']

    constructor(
            $injector: ng.auto.IInjectorService,
            $scope,
            $stateParams,
            $state,
            $popupManager,
            $element,
            $controller
        ) {
        super();
        $injector.invoke(this.init, this, {$scope});
        this.$scope = $scope;
        this.$element = $element;
        this.$state = $state;
        this.$popupManager = $popupManager;
        var mutlimediaController  = $controller('MultimediaController', {this.$scope: $scope});
        mutlimediaController.someFunction();// some function of your MultimediaController
        this.albums = mutlimediaController.albums;
}

But I would suggest making service/factory to access the common data.

Like :

myApp.service('myService', function() {
    var text = '';
    this.getValue = function () { 
      return text;
    }
    this.setValue = function (data) { 
     return text = data;
    } 
});

//Inside controller    
myApp.controller('MyCtrl', function MyCtrl($scope, myService) {
myService.setValue ("data to service");
$scope.message = myService.getValue();
});