ES6 模块加载器不加载 Angular 使用 TypeScript 编写的控制器
ES6 Module Loader Doesn't Load Angular Controller written using TypeScript
我正在尝试将 Javascript angular 模块转换为 TypeScript。目前我正在使用 ES6 模块加载器。并尝试一个一个地转换每个模块。我确实将一个模块转换为 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]);
这是我在TypeScript
中写的Angular module
。
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()]);
}
我可以看到我的模块正在加载,但控制器和指令从未注册过,根本没有下载过。谁能告诉我我在哪里做错了。
想通了。我需要在我的模块中导入控制器和指令。
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};
我正在尝试将 Javascript angular 模块转换为 TypeScript。目前我正在使用 ES6 模块加载器。并尝试一个一个地转换每个模块。我确实将一个模块转换为 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]);
这是我在TypeScript
中写的Angular module
。
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()]);
}
我可以看到我的模块正在加载,但控制器和指令从未注册过,根本没有下载过。谁能告诉我我在哪里做错了。
想通了。我需要在我的模块中导入控制器和指令。
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};