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: stackoverflow.com/questions/11003916/…. It descriptes how to change views in the controller. — DijkeMark
– DijkeMark, Commented Aug 31, 2017 at 6:57

DijkeMark · Accepted Answer · 2017-09-20 09:10:49Z

0

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.

answered Sep 20, 2017 at 9:10

DijkeMark

1,3565 gold badges20 silver badges41 bronze badges

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

1 Comment

JC Vogel Over a year ago

I looted (?) 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.

Collectives™ on Stack Overflow

Angular ui-router 1.0 change view in $transition

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related