Using Typescript ui-router provider for a modals

Question

Hello I need your help in making converting this excellent javascript code into typed ui-router.

Question Section

Question 1: So does a javascript callback equate the return of the instance of the typescript class? Feel free to help me out if I am not going in the right direction.

Example of what I mean above: In the code below I think that provider means a callback. JavaScript

 var provider = this;
    this.$get = function() {
        return provider;
    }

I think but I am not sure that translates to typescript as:

   private _Service:any;
    public $get() { return this._Service; }

    constructor(private $stateProvider:any ) {
        this._Service = this;
    }

Code Section

Here what I am trying to convert

.provider('modalState', function($stateProvider) {
    var provider = this;
    this.$get = function() {
        return provider;
    }
    this.state = function(stateName, options) {
        var modalInstance;
        $stateProvider.state(stateName, {
            url: options.url,
            onEnter: function($modal, $state) {
                modalInstance = $modal.open(options);
                modalInstance.result['finally'](function() {
                    modalInstance = null;
                    if ($state.$current.name === stateName) {
                        $state.go('^');
                    }
                });
            },
            onExit: function() {
                if (modalInstance) {
                    modalInstance.close();
                }
            }
        });
    };
})

which is excellent code found: Using ui-router with Bootstrap-ui modal

Here my attempt to convert it to typescript

class ModalService {

    private _Service:any;
    public $get() { return this._Service; }

    constructor(private $stateProvider:any ) {
        this._Service = this;
    }
    state(stateName:string, options:any ) : void {
        this.state =  (stateName, options)=> {
            var modalInstance;
            this.$stateProvider.state(stateName, {
                url: options.url,
                onEnter: ($modal, $state) => {
                    modalInstance = $modal.open(options);
                    modalInstance.result['finally']( ()=> {
                        modalInstance = null;
                        if ($state.$current.name === stateName) {
                            $state.go('^');
                        }
                    });
                },
                onExit: () => {
                    if (modalInstance) {
                        modalInstance.close();
                    }
                }
            });
        };


    }

}

hidden · Accepted Answer · 2015-06-04 06:17:59Z

0

Turns out writting the functions above like this solve the issue and the modals are now working.

       public $get() {
                 return () => { return ModalService; }
             }
   constructor(private $stateProvider) {}

this is the equivalent after many hours of thinking. Very simple but I was stuck on it. Hope it helps other people.

answered Jun 4, 2015 at 6:17

hidden

3,2368 gold badges51 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

Using Typescript ui-router provider for a modals

Question Section

Code Section

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Question Section

Code Section

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related