Has anyone tried using typescript enums in AngularJS HTML pages?

Question

In Typescript I created an enum like this:

enum Action { None = 0, Registering = 1, Authenticating = 2 };

In my controller I set a property called action like this:

class AuthService implements IAuthService {

    action: number;

    constructor(
        private $state,
        private userService,
        private utilityService: IUtilityService
        ) {

        this.action = Action.None;

    }

    doRegister() => {
       this.action = Action.Registering;
    }

This works good but how can I use the enum in my HTML. Is that possible? What I would like to do is to use it in some place like this:

<span ng-class="{'fa-spin fa-spinner': app.authService.authenticating }">

Without the need to create different variables for:

app.authService.authenticating
app.authService.registering
...
etc

Answer 1

You can put that on the $rootScope e.g.

mainmodule.run([
    '$rootScope'
], function ($rootScope){

    // put it on $rootScope
    $rootScope.Action = Action;
});

And since every $scope inherits from it it is on each scope and you can just do Action.foo etc.

Note: For directives with an isolate scope you need to do $root.Action.foo. Just Action would not work as it intentionally breaks the prototype chain.