Our application utilizes the "controller as" syntax for AngularJS:
<div class="workspace-header" ng-controller="LoginController as loginCtl">
The LoginController is defined as a TypeScript class like so:
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() {
}
}
To instantiate it, we use the following approach:
.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);
])
However, after upgrading to AngularJS 1.3.0, there are issues with the "controller as" syntax not functioning properly. When attempting to call loginCtl.login(), nothing happens and no errors are shown in the console.
Upon investigation, it seems that a breaking change in AngularJS might be causing this issue:
https://github.com/angular/angular.js/issues/8876 https://github.com/angular/angular.js/pull/8882 (added note to documentation)
A possible solution involves modifying the controller definition as follows:
.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);
// extend 'this' with the properties of the controller
_.extend(this, loginCtrl);
_.extend(this, loginCtrl["__proto__"]);
}
])
If anyone else has encountered this issue or has a cleaner approach for defining classes in TypeScript, we would appreciate your insights.