Domanda UI-Router non sta per correggere lo stato dall'URL


Ho un setup un po 'complicato con molte schede / viste annidate. Ecco le parti rilevanti del mio $stateProvider

$stateProvider
    .state('tab', {
        abstract: true,
        url: '',
        templateUrl: 'tabs.html'
    })
    .state('tab.event', {
        url: '/event',
        views: {
            'event': {
                abstract: true,
                templateUrl: 'event-tabs.html'
            }
        }
    })
    .state('tab.event.list', {
        url: '/list',
        views: {
            'list': {
                templateUrl: 'event-list.html'
            }
        }
    })
    .state('tab.event.detail', {
        cache: false,
        url: '/:id',
        views: {
            'detail': {
                abstract: true,
                templateUrl: 'event-detail-tabs.html'
            }
        }
    })
    .state('tab.event.detail.info', {
        cache: false,
        url: '/info',
        views: {
            'info': {
                templateUrl: 'event-detail-info.html'
            }
        }
    })
    .state('tab.event.detail.map', {
        cache: false,
        url: '/map',
        views: {
            'map': {
                templateUrl: 'event-detail-map.html'
            }
        }
    });
  • utilizzando ui-sref="tab.event.detail({id: event.id})" Posso collegarmi al tab.event.detail.info stato e l'URL cambia in /event/:id/info, bene.
  • Se inserisco l'URL /event/:id verrà reindirizzato a /event/:id/info, bene.
  • MA se inserisco l'URL /event/:id/info lo stato cambierà in tab.event.list e URL a /event/list, non bene.

Mi piacerebbe essere in grado di condividere link a /event/:id/info e /event/:id/map ma continuano a reindirizzare /event/list
Ho provato un sacco di cose ma non riesco a farlo funzionare, per favore aiuto!

Modifica: creato un esempio di Plunker ma non riesco a replicare il problema perché non posso manipolare direttamente l'URL dell'app. https://plnkr.co/edit/7iZAH26SwAILqBfkdXJS?p=preview


16
2018-05-25 14:57


origine


risposte:


Puoi provare a utilizzare questo dopo aver definito tutti i tuoi stati:

$urlRouterProvider
    .when('/event/:id/info', '/event/:id/info')
    .when('/event/:id/map', '/event/:id/map')

O puoi provare

var config = ['$rootScope', '$state',
 function ($rootScope, $state) {

  //you can make the below code better by comparing URL you are hitting in the if condition. Depending on URL you can navigate to info or map state. Also, you can make the id dynamic

  $rootScope.$on('$stateChangeStart', function (event, toState) {    
    if (toState.name == "tab.event.list") { 
      event.preventDefault()
      $state.go('tab.event.detail.info', {id: 2});
    }
  });

}]

1
2017-07-27 18:04



Il tuo "tab.event.detail" lo stato è uno stato astratto che indica lo stato in cui esso non può essere attivato da sé stesso, quindi in questo caso caricherà automaticamente lo stato figlio "tab.event.detail.info" stato.

Ricorda: può essere attivato solo uno stato alla volta.

Fare riferimento alla documentazione https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views


7
2018-05-25 15:14