AngularJS1.3.0+TypeScript控制器定义问题-AngularJS1.3.0+TypeScriptcontrollerdefinitionissue

In our application we use the "controller as" syntax:

在我们的应用程序中,我们使用“controller as”语法:

To define the LoginController, we define it as a TypeScript class:

要定义LoginController,我们将其定义为TypeScript类:

class LoginController {
    // variables here

    constructor($rootScope, $http, $location, $COOKIEStore, AuthService, AUTH_EVENTS, localStorageService) {
        // set variables

        this.$rootScope.$on(AUTH_EVENTS.logoutSuccess, () => {
            this.logout();
        });
    }

    public login(credentials: any): void {
        this.AuthService.login(credentials).then(() => {
            // login success
        }, () => {
            // login failed
        });
    }

    public logout() {

    }
}

and instantiate it this way:

并以这种方式实例化它:

.controller('LoginController', ['$rootScope', '$http', '$location', '$COOKIEStore', 'AuthService', 'AUTH_EVENTS', 'localStorageService',
    ($rootScope, $http, $location, $COOKIEStore, AuthService, AUTH_EVENTS, localStorageService) =>
        new LoginController($rootScope, $http, $location, $COOKIEStore, AuthService, AUTH_EVENTS, localStorageService);
])

After upgrading to AngularJS 1.3.0 this does not work at all. The "controller as" syntax is completely broken (when used in this fashion). We define a form on the page with ng-submit:

升级到AngularJS 1.3.0后,这根本不起作用。 “控制器为”语法完全被破坏(以这种方式使用时)。我们使用ng-submit在页面上定义一个表单:

    ... fields here
    Login

The loginCtl.login() does nothing, and no errors are output to the console.

loginCtl.login()不执行任何操作,并且不会向控制台输出错误。

After a lot of debugging and some digging, I believe the breaking change in AngularJS is this:

经过大量的调试和挖掘,我相信AngularJS的突破性变化是这样的:

https://github.com/angular/angular.js/issues/8876 https://github.com/angular/angular.js/pull/8882 (added note to documentation)

https://github.com/angular/angular.js/issues/8876 https://github.com/angular/angular.js/pull/8882(添加文档说明)

If I modify my controller as such:

如果我修改我的控制器:

.controller('LoginController', ['$rootScope', '$http', '$location', '$COOKIEStore', 'AuthService', 'AUTH_EVENTS', 'localStorageService',
    function ($rootScope, $http, $location, $COOKIEStore, AuthService, AUTH_EVENTS, localStorageService) {
        var loginCtrl = new LoginController($rootScope, $http, $location, $COOKIEStore, AuthService, AUTH_EVENTS, localStorageService);

        // since controllers always return 'this', extend 'this' with the controllers
        // properties and it's prototype's properties
        _.extend(this, loginCtrl);
        _.extend(this, loginCtrl["__proto__"]);
    }
])

Then I can get it working, but this seems messy (and I'm not sure if I would have to chain up prototypes in case of superclasses).

然后我可以让它工作,但这看起来很混乱(我不确定我是否必须在超类的情况下链接原型)。

Has anyone else run into this and have a better approach for defining these classes in TypeScript?

有没有其他人遇到过这种情况并且有更好的方法在TypeScript中定义这些类?

2 个解决方案

.controller('LoginController', ['$rootScope', '$http', '$location', '$COOKIEStore', 'AuthService', 'AUTH_EVENTS', 'localStorageService',
    ($rootScope, $http, $location, $COOKIEStore, AuthService, AUTH_EVENTS, localStorageService) =>
        new LoginController($rootScope, $http, $location, $COOKIEStore, AuthService, AUTH_EVENTS, localStorageService);
])

//other dependencies deleted for brevity
.controller('LoginController', ['$scope', LoginController]);
LoginController.$inject = ['$scope'];