ES6模块加载程序不加载使用TypeScript编写的Angular Controller

时间:2015-10-02 20:03:19

标签: angularjs typescript es6-module-loader

我正在尝试将Javascript角度模块转换为TypeScript。目前我正在使用ES6 Module Loader。并尝试逐个转换每个模块。我确实将一个模块转换为TypeScript,但是ES6加载器没有加载控制器和指令的问题。

这是我的app.js

 import {editFieldModule} from './modules/field/editField/editField.module';
 //Some other Angular Modules written ES6 ///
 export var comp = angular.module('comp',[ "comp.modules.editField",//someother]);

以下是我在Angular module中写的TypeScript

 var editFieldModule: ng.IModule = angular.module("comp.modules.editField", []);
 export {editFieldModule};

这是我的Controller

 /// <reference path="../../../../thirdparty/angular-material/angular-material.d.ts"/>
 /// <reference path="../../../../thirdparty/angular/angular.d.ts"/>
 /// <reference path="../../../../thirdparty/angular-ui-router/api/angular-ui-router.d.ts"/>


module features.editField {
var app = angular.module('comp.modules.editField');
export class EditFieldController {

    static $inject: string[] = ["$mdDialog", "$state"];

    constructor(private _mdDialog: any, private _state: ng.ui.IStateService) {}

    showConfirmation(ev: any) {
        let tempThis = this;
        tempThis._mdDialog.show({
            controller: 'editFieldCancelDialogController',
            controllerAs: 'vm',
            templateUrl: 'test.html',
            parent: angular.element(document.body),
            targetEvent: ev
        });
    }
  }
 app.controller('editFieldController', features.editField.EditFieldController);
}

这是我的directive

module features.editField {
var app = angular.module('comp.modules.editField');
export class EditFieldDirective implements ng.IDirective {        

    public restrict: string = 'E';
    public controller: string = 'editFieldController';
    public templateUrl: string = 'app/modules/field/editField/editField.tmpl.html';
    public controllerAs: string = 'vm';
    public bindToController: boolean = true;
    public link = function() {
            console.log('instantiating directive!');
        }        
    }
app.directive("efpEditField", [() => new features.editField.EditFieldDirective()]);
}

我可以看到我的模块正在加载,但控制器和指令从未注册过,根本没有下载。任何人都可以告诉我我在做错的地方。

1 个答案:

答案 0 :(得分:0)

想通了。我需要在我的模块中导入控制器和指令。

import {editField_Controllers} from  './editField.controller';
import {editField_directive} from './editField.directive';
var editFieldModule: ng.IModule = angular.module("comp.modules.editField", []);
editFieldModule.controller("editFieldController", editField_Controllers.EditFieldController);
editFieldModule.directive("efpEditField", [() => new editField_directive.EditFieldDirective()]);
export {editFieldModule};