CODEWITHSUNDEEP
javascriptangularjs
muscleman71
muscleman71

Reputation: 91

How to transitionTo multiple views using angular ui.router

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'> });

Upvotes: 0

Views: 139

Answers (2)

Sir Mbuki
Sir Mbuki

Reputation: 1210

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

Upvotes: 0

Chris Barr
Chris Barr

Reputation: 33972

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

Upvotes: 0

Related Questions