如何使用角度ui.router过渡到多个视图

Question

I'm having some issues with the ui.router. I've defined what i thought were 3 states that i could flip between

$stateProvider
        .state('rackOrShelf', {
            url: '/information',
            templateUrl: 'Scripts/html/rackOrShelfPartial.html'
        }).state('door', {
            url: '/information',
            templateUrl: 'Scripts/html/doorPartial.html'
        }).state('frame', {
            url: '/information',
            templateUrl: 'Scripts/html/framePartial.html'
        });

I've an html page that defines a header to display common stuff at the top. further down within div i have the ui-view placeholder

the html page defines an ng-controller that does some work and returns a json model, one of the parameters being a

model.Transiton = 'frame';

which i then use to call this. $state.transitionTo(model.Transiton);

Problem is if model.Transition = 'rackOrShelf' or 'door' ui.router seems to work fine. but if i do model.Transition = 'frame' i always appear to get the contents of the door templateUrl? Why is this?

this is an SPA too. and i use $routeProvider

$routeProvider
      .when("/main", {
          templateUrl: "Scripts/html/main.html",
          controller: "mainController"
      }).when("/information", {
          templateUrl: "Scripts/html/information.html",
          controller: "informationController",
          reloadOnSearch: false
      })
      .otherwise({ redirectTo: "/main" });

so here is an update, this seems to work.

$stateProvider
        .state('empty', {
            template: '<div></div>'
        })
        .state('rackOrShelf', {
            templateUrl: 'Scripts/html/rackOrShelfPartial.html'
        }).state('door', {
            templateUrl: 'Scripts/html/doorPartial.html'
        }).state('frame', {
            templateUrl: 'Scripts/html/framePartial.html'
        }).state('information', {
            url: '/information',
            params: {partial: 'empty'},
            controller: function ($state) {
               $state.go($state.params.partial);
            }
        });

And in my angular controller i have something like this.

 $state.transitionTo('information', { partial:<'door' || 'frame' || 'rackOrShelf'> });

Answer 1

All three of your states have the exact same URL. I'm not sure if giving these unique URL's will fix your issue, but it will certainly reduce other issues you might have:

$stateProvider
    .state('information', {
        abstract: true,
        url: '/information',
        template: '<ui-view />'
    })
        .state('information.rackOrShelf', {
            url: '/rackOrShelf',
            templateUrl: 'Scripts/html/rackOrShelfPartial.html'
        }).state('information.door', {
            url: '/door',
            templateUrl: 'Scripts/html/doorPartial.html'
        }).state('information.frame', {
            url: '/frame',
            templateUrl: 'Scripts/html/framePartial.html'
        });

Now you should be able to navigate to /information/door for example, or transition to the state name of information.door

Answer 2

Angular Router allows us to handle that pretty well

I think nested states the solution.

Kindly check here:

Different states for same URL #217

Re-use a URL for states #1096