Question

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

<div class="workspace-header" ng-controller="LoginController as loginCtl">

要定义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() {

    }
}

以这种方式实例化：

.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);
])

升级到AngularJS 1.3.0后，这根本不起作用。 “控制器为”语法完全被破坏（以这种方式使用时）。我们使用ng-submit：

在页面上定义表单

<form name="loginForm" ng-submit="loginCtl.login(dc.credentials)" novalidate>
    ... fields here
    <button type="submit">Login</button>
</form>

loginCtl.login（）不执行任何操作，并且没有错误输出到控制台。

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

https://github.com/angular/angular.js/issues/8876 https://github.com/angular/angular.js/pull/8882（在文档中添加了注释）

如果我这样修改我的控制器：

.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__"]);
    }
])

然后我可以让它工作，但这看起来很混乱（而且我不确定在超类的情况下是否需要链接原型）。

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

Answer 1

正如PSL所说，这就是问题所在：

.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);
])

您只需使用LoginController代替巨箭功能。

请参阅this comment in the issue you linked，了解返回对象的方式是否正确;该函数需要在使用new运算符时才有效。

Answer 2

正如PSL所说，但是注入了$ ...我提出了类似的问题Angular 1.3 breaking changes - scope set but reset before $apply

我已将答案放在此处：http://plnkr.co/edit/NMPXFd67WLXHjhrfync2

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

AngularJS 1.3.0 + TypeScript控制器定义问题

2 个答案: