angularjs - AngularJS、Typescript 和 Oclazyload 无法识别范围

Question

我正在将我现有的AngularJS应用程序从 ( AngularJS++ ) 更改为( ES5++ )WebpackAngularJSTypescriptWebpack

这是我的模块实现之一：

登录控制器.ts

import {ILoginScope} from "./login.scope";
import {LoginViewModel} from "../../../view-models/user/login.view-model";

export class LoginController implements ng.IController{

    //#region Properties

    public email: string = '123456';

    //#endregion

    //#region Constructor

    /*
    * Initialize controller with injectors.
    * */
    public constructor(public $scope: ILoginScope){
        this.$scope.loginModel = new LoginViewModel();
        this.$scope.loginModel.email = '123';
        this.$scope.hasEmail = this.hasEmail;
    }

    //#endregion

    //#region Methods

    //#endregion

    //#region Events

    public clickLogin(): void {
        console.log('Hello world');
    }

    public hasEmail(): boolean{
        let loginModel = this.$scope.loginModel;
        if (!loginModel || !loginModel.email)
            return false;

        return true;
    }

    //#endregion
}

login.scope.ts

import {LoginViewModel} from "../../../view-models/user/login.view-model";

export interface ILoginScope extends ng.IScope {

    //#region Properties

    /*
    * Login information.
    * */
    loginModel: LoginViewModel;

    //#endregion

    //#region Methods

    /*
    * Called when login is clicked.
    * */
    clickLogin: Function;

    hasEmail: () => boolean;

    //#endregion
}

登录模块.ts

import {StateProvider} from "@uirouter/angularjs";
import {UrlStatesConstant} from "../../../constants/url-states.constant";
import {module} from 'angular';


export class LoginModule {

    //#region Constructors

    public constructor(private $stateProvider: StateProvider) {
        $stateProvider
            .state(UrlStatesConstant.LoginStateName, {
                url: UrlStatesConstant.LoginStateUrl,
                controller: 'loginController',
                templateProvider: ['$q', ($q) => {
                    // We have to inject $q service manually due to some reasons that ng-annotate cannot add $q service in production mode.
                    return $q((resolve) => {
                        // lazy load the view
                        require.ensure([], () => resolve(require('./login.html')));
                    });
                }],
                parent: UrlStatesConstant.AuthorizeLayoutName,
                resolve: {
                    /*
                    * Load login controller.
                    * */
                    loadLoginController: ($q, $ocLazyLoad) => {
                        return $q((resolve) => {
                            require.ensure([], (require) => {
                                // load only controller module
                                let ngModule = module('account.login', []);

                                // Import controller file.
                                const {LoginController} = require("./login.controller");
                                ngModule.controller('loginController', LoginController);
                                $ocLazyLoad.load({name: ngModule.name});
                                resolve(ngModule.controller);
                            })
                        });
                    }
                }
            });

    }

    //#endregion
}

这就是我将typescriptangularjs 模块注册到现有es5angularjs 应用程序的方式：

module.exports = (ngModule) => {
    // Load routes.
    let login = require('./login');
    ngModule.config(($stateProvider) => login.LoginModule($stateProvider));
};

当我运行应用程序并访问登录页面 时，我的开发者控制台中抛出了一个错误：

TypeError：无法读取 ChildScope.LoginController.hasEmail 处未定义的属性“loginModel”（login.controller.ts:26）

这是生成的源地图：

从错误消息的内容来看，即使在构造函数中this.$scope声明了第 26 行，也无法识别它。public $scope: ILoginScope

我在做什么错？

谢谢，

标签： angularjstypescriptwebpackoclazyload