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

basarat · Accepted Answer · 2014-08-25 06:36:54Z

11

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.

answered Aug 25, 2014 at 6:36

basarat

278k61 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Samantha J T Star Over a year ago

I've been doing some checking into the use of constants also. Do you think it's easier to use the app.constant( or use a Typescript solution?

Samantha J T Star Over a year ago

Can you show me how I would inject $rootScope into the controller? Do I inject $rootScope or just $scope?

basarat Over a year ago

Both. But you don't need to. Use enums like any other ts utility function that doesn't need access to angular

Collectives™ on Stack Overflow

Has anyone tried using typescript enums in AngularJS HTML pages?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related