Angular ui-router 1.0 change view in $transition

Question

I would like somebody's help on how to change the view within a transition. My problem is that I need to load a view dynamically. So I create a new view (this seems to be working):

var viewname = 'view-'+Date.now();
var element = angular.element(document.querySelector('#view-container'));
var scope = element.scope();
var elementString = '<div id="'+viewname+'" ui-view="'+viewname+'" class="viewunique"></div>';
$compile(element.append(elementString))(scope);

This will add the view to the $view variable and seems to be working.

My question is: How can I use this new view in a statechange. I tried using the $transition$.$to() like:

$transitions.onStart( {}, function($transition$) {
    $transition$.$to().views = {
        templateUrl : templateUrl
    };
});

where viewname is the name of the created view, and templateUrl is the correct template. The template will have it's own controller and stuff. This will overwrite the view for this state, but doesn't really work or do anything.

Somehow I would like to change the views for the state within the transition to this state so that the dynamically created view will be used. Is this possible? Does someone know how this can be done?

Perhaps this could be of any use: https://stackoverflow.com/questions/11003916/angularjs-how-do-i-switch-views-from-a-controller-function. It descriptes how to change views in the controller. — DijkeMark, Aug 31 '17 at 06:57

score 0 · Accepted Answer · answered Sep 20 '17 at 09:10

Okay, I did some research on what you exactly wanted. If I understand correctly you want to change views during a state change, with each view having it's own scope and controller.

This seems to me like you want multiple states running besides each other. Perhaps you could take a look at ui-router-extras: https://github.com/christopherthielen/ui-router-extras

This package will allow you to use parallel states and nested states, which I believe is what you want/need.

Take a loot at https://christopherthielen.github.io/ui-router-extras/#/home for more info and working examples.

I looted (?) https://christopherthielen.github.io/ui-router-extras/#/home, this was indeed what I was looking for. Took some work to get it going, but making good progress... Thanks. — JC Vogel, Sep 20 '17 at 09:36

Angular ui-router 1.0 change view in $transition

1 Answers1