christopherthielen / ui-router-extras

THIS PROJECT IS NO LONGER MAINTAINED -- Extras for UI-Router for AngularJS. Sticky States (a.k.a. parallel states), Deep State Redirect (for tab-like navigation), Future States (async state definition)
http://christopherthielen.github.io/ui-router-extras/
MIT License
917 stars 211 forks source link

How can I register a Future State at runtime in my Controller #325

Closed byrneciaran closed 8 years ago

byrneciaran commented 8 years ago

I would like to register dynamic states determined once the user logs in. I find I can register states with the $futureStateProvider at the config() phase but if I try to register the state in my Controller at runtime it is registered but not resolved. I'm keeping a reference to the $futureStateProvider, so I thought I could register the state in the Controller.

This seems to only happen when navigating by Url (http://localhost:3000/home/iframe2). If I navigate with $state.go("iframe2") it works.

Below is a demo where I'm trying to register a simple state.

Any help is appreciated :)

Controller

app.controller("DemoController", function () {

   // NOTE - This doesn't work !
    var futureState = {
        stateName: "iframe2",
        url: "/home/iframe2",
        type: "dataStoreState",
        src: "iframe2.html"
    };

    app.futureStateProvider.futureState(futureState);

});

Router

app.config(function ($futureStateProvider,$stateProvider, $locationProvider) {

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });

    $stateProvider
        .state("app", {
            abstract: true,
            templateUrl: "/app/layouts/app",
            controller: "ApplicationController as vm"
        })
        .state("app.home", {
            url: "/home",
            views: {
                "content": {
                    templateUrl: "/app/home/index",
                    controller: "DemoController as vm"
                }
            }
        });

    function dataStoreStateFactory($q, futureState) {

        var state = {
            name: futureState.stateName,
            url: futureState.url,
            parent:"app",
            views: {
                "content": {
                    templateUrl: "/app/home/demo"
                }
            }
        };
        return $q.when(state);
    }

    app.futureStateProvider = $futureStateProvider;
    app.futureStateProvider.stateFactory("dataStoreState", dataStoreStateFactory);

    // NOTE: If I register the future state here it works fine
    var futureState = {
        stateName: "iframe2",
        url: "/home/iframe2",
        type: "dataStoreState",
        src: "iframe2.html"
    };

    app.futureStateProvider.futureState(futureState);
});
christopherthielen commented 8 years ago

I put your code into a plunker and it works fine:

http://plnkr.co/edit/KP7VzfIxFzCYjr6yKBpY?p=info

sanujgandhi commented 6 years ago

Hi, I have checked the plunker code and it is not running. Could you please help in this as I am also stuck with this issue.