Question

将Angular与Typescript一起使用。我有一个基于Angular Bootstrap UI选项卡的Tabs控制器，它在纯Angular中工作，但当我将它移动到我们的Typescript样式时，我无法获得一个指令（OneTab）来找到（父）指令的控制器（TabSet））。

ERROR: Unknown provider: tabProvider <- tab

我尝试了很多不同的方法，但没有一种方法可以像非打字稿版本一样正常工作。

Ex：Angular-only Plunker

我们正在使用模块化模型，它与配置文件相关联，每个配置文件用于指令，控制器等。除了此选项卡指令实验之外，此结构工作正常。

module app.directives {
'use strict';

angular.module('app')
    .directive('tabSet', ()=> new TabSet())
    .directive('oneTab', ()=> new OneTab())
;

}

module app.directives {
    interface ITabScope extends ng.IScope {
        active:boolean;
    }

    export class OneTab implements ng.IDirective {
        priority = 0;
        restrict = 'E';
        transclude = true;
        require = '^tabsetCtrl';
        scope = {
            heading: '@'
        };
        template = '<div role="tabpanel" ng-transclude ng-show="active"></div>';
        link = function (scope:ITabScope, element:ng.IAugmentedJQuery, attr:ng.IAttributes, tabsetCtrl:any) {
            scope.active = false;
            tabsetCtrl.addTab(scope);
        }
    }
}


module app.directives {
    import TabSetController = app.controllers.TabSetController;
    export class TabSet implements ng.IDirective{
        priority = 0;
        restrict = 'E';
        transclude = true;
        scope = {};
        templateUrl = 'layout/tabset.html';
        controller = TabSetController;
        controllerAs = 'tabsetCtrl';
        bindToController = true;
    } 
}


module app.controllers {
'use strict';
export class TabSetController {
    tabs:Array<any>;
    tab:any;
    selectedTab:any;

    constructor(tab:any, selectedTab:any) {
        this.tabs = [];
        this.addTab(tab);
        this.select(selectedTab);
        console.log("in constructor");
    }

    addTab(tab?:any) {
        if(tab){
            this.tabs.push(tab);
            if (this.tabs.length === 1) {
                tab.active = true
            }
        }

    };

    select(selectedTab?:any) {
        if (selectedTab){
            angular.forEach(this.tabs, function (tab:any) {
                if (tab.active && tab !== selectedTab) {
                    tab.active = false;
                }
            });
            selectedTab.active = true;
        }

    }
}

}

Answer 1

问题不在于您的指令，据我所知，它与您的控制器类有关。 Angular假设控制器的构造函数方法中的任何参数都是您要注入的服务 - 当您尝试传入名为tab和selectedTab的参数时看到它们，它是搜索服务以注入这些名称。没有名为tab的服务，因此您收到了未知的提供程序错误。

Typescript + Angular 1.x，指令w / require：'^ someCtrl'与'unknown provider'失败

1 个答案: