CODEWITHSUNDEEP
angularjstypescript
Hejo
Hejo

Reputation: 293

Inject Directive into Controller

SOLVED:

I was using the wrong approach. Now I have defined a $watch in the link function of the directive, that calls the open() method on the controller of the directive.

Orginial Question:

I'm currently working on an Angular App developed with Typescript. Now I have to following problem, I have an Directive that contains an KendoUI Window as an Popup Window. This window in the directive should be opened from the controller of the main form.

Controller:

module CLogic.pps
{
'use strict';
export class produktionsAuftragDetailController
{
    ...
    static $inject = [
        '$scope',
        ...
        //'stListLoeschenWindow'
        ,'stListLoeschenFactory'
        ];      
    constructor(
        private $scope: any,
        ...
        //, private stListLoeschenWindow: CLogic.pps.directives.stListLoeschenDirective
        , private stListLoeschenFactory: CLogic.pps.directives.stListLoeschenDirective
        )
    {

   // Switch Form to Edit Mode
    aendern(stlD: CLogic.pps.directives.stListLoeschenController)
    {
    // Call the open method of the controller of the directive here
        stListLoeschenFactory.controller.open(1234);
    }
    ...
    }
}    
angular
    .module('CLogic.pps')
    .controller('CLogic.pps.produktionsAuftragDetailController',produktionsAuftragDetailController);
}

Directive:

module CLogic.pps.directives
{
'use strict';
export class stListLoeschenController
{
    public StListLoeschenWindow: kendo.ui.Window;

    private StListKey: number;public Fixieren: boolean;public Prodinfo: boolean;

    static $inject =
    [
        'CLogic.pps.services.ppsDataService','$log','hotkeys'
    ];
    constructor
        (public dataService: CLogic.pps.ppsDataService, private $log: ng.ILogService, public hotkeys: ng.hotkeys.HotkeysProvider
        )
    {
        this.Fixieren = false;
        this.Prodinfo = false;
    }
    // This is the method that should be called from the main Controller       
    open(index: number)
    {
        this.StListKey = index;
        this.StListLoeschenWindow.open();
        this.StListLoeschenWindow.center();
    }
}

export class stListLoeschenDirective implements ng.IDirective
{
    restrict = 'AE';
    templateUrl = 'CLogic/pps/detail/StListDeleteBestWindow.directive.html';
    controller = CLogic.pps.directives.stListLoeschenController;
    controllerAs = 'stListLoeschen';

    constructor(private ppsDataService: CLogic.pps.ppsDataService, $log: ng.ILogService, hotkeys: ng.hotkeys.Hotkey){}

    link: ng.IDirectiveLinkFn = (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes)=>{ };

    static factory(): ng.IDirectiveFactory 
    {  
        var directive: ng.IDirectiveFactory = (ppsDataService, $log, hotkeys) => new stListLoeschenDirective(ppsDataService, $log, hotkeys);
        directive.$inject = ['CLogic.pps.services.ppsDataService', '$log', 'hotkeys'];
        return directive;
    }
}
angular
    .module('CLogic.pps.directives', [])
    .directive('stListLoeschenWindow', stListLoeschenDirective.factory())
    .factory('stListLoeschenFactory', stListLoeschenDirective.factory());
}

When I inject the factory the code works instead of the fact that I can get no reference to the controller of the directive (in the aendern method of the main controller). And when I try to inject the directive itself into the main controller I get an injector error:

Error: [$injector:unpr] Unknown provider: stListLoeschenDirectiveProvider <- stListLoeschenDirective <- CLogic.pps.produktionsAuftragDetailController http://errors.angularjs.org/1.4.1/$injector/unpr?p0=stListLoeschenDirectiveProvider%20%3C-tListLoeschenDirective%20%3C-%20CLogic.pps.produktionsAuftragDetailController at https://localhost:44302/Scripts/angular.js:68:12

Upvotes: 2

Views: 4151

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123891

The error shown in the question is clear:

when angular tries to instantiate CLogic.pps.produktionsAuftragDetailController and therefore inject its dependency static $inject = [ 'CLogic.pps.services.ppsDataService' ... that service cannot be found

It seems, that you did not configured your factory properly.

The code above is configuring it the same way as is configured directive. And that could be the issue:

angular
    .module('CLogic.pps.directives', [])
    .directive('stListLoeschenWindow', stListLoeschenDirective.factory())
    // factory should be different then directive
    .factory('stListLoeschenFactory' , stListLoeschenDirective.factory());

Upvotes: 0

Related Questions