将指令注入控制器

Question

已解决：

我使用了错误的方法。现在我在指令的链接函数中定义了一个 $watch，它调用指令控制器上的 open() 方法。

原始问题：

我目前正在开发一个使用 Typescript 开发的 Angular 应用程序。现在我必须解决问题，我有一个指令，其中包含一个 KendoUI 窗口作为弹出窗口。指令中的这个窗口应该从主窗体的控制器中打开。

控制器：

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);
}

指令：

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());
}

当我注入工厂时，代码可以正常工作，而不是我无法获得对指令控制器的引用（在主控制器的 aendern 方法中）。当我尝试将指令本身注入主控制器时，我得到一个注入器错误：

错误：[$injector:unpr] 未知提供者： stListLoeschenDirectiveProvider http://errors.angularjs.org/1.4.1/$injector/unpr?p0=stListLoeschenDirectiveProvider%20%3C-tListLoeschenDirective%20%3C-%20CLogic.pps.produktionsAuftragDetailController 在https://localhost:44302/Scripts/angular.js:68:12

Answer 1

问题中显示的错误很清楚：

当 Angular 尝试实例化 CLogic.pps.produktionsAuftragDetailController 并因此注入其依赖项 static $inject = [ 'CLogic.pps.services.ppsDataService' ... 时 service 找不到

看来，您没有正确配置您的工厂。

上面的代码是以与配置指令相同的方式配置它。这可能就是问题所在：

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