当前位置: 动力学知识库 > 问答 > 编程问答 >

angularjs - 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

网友答案:

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());
分享给朋友:
您可能感兴趣的文章:
随机阅读: