Angular UI-Router $ urlRouterProvider. Quando non funziona quando clicco su

Ho .when('/center', '/center/question') nella mia app web angular.

Quando digito '/center' nel mio browser, verrà reindirizzato a '/center/question' come mi aspetto, ma quando clicco su , non si reindirizzerà e rimarrà sull’URL '/center' .

Non c’è nessun errore nella mia console e non so perché.

Vedo un problema simile qui Angular UI-Router $ urlRouterProvider. Quando non funziona più . Provo la risposta ma ancora non funziona per me.

Ecco il mio codice coffeescript:

 whenConfig = ['$urlRouterProvider', ($urlRouterProvider) -> # default url config $urlRouterProvider .otherwise '/center' .when '/center', '/center/question' ] stateConfig = ['$stateProvider', ($stateProvider) -> # nested url config capitalize = (s)-> s[0].toUpperCase() + s[1..] mainConfig = ({ name: name url: "/#{name}" templateUrl: "templates/#{name}.html" controller: "#{capitalize name}Ctrl" } for name in ['center', 'keywordList', 'keywordConfig', 'log', 'stat']) centerConfig = ({ name: "center.#{name}" url: "/#{name}?page" templateUrl: "templates/center/#{name}.html" controller: "Center#{capitalize name}Ctrl" resolve: thead: (CenterService) -> CenterService.getThead @self.name data: (CenterService, $stateParams) -> CenterService.fetchItems @self.name, $stateParams.page } for name in ['question', 'answer', 'comment', 'article']) for singleConfig in mainConfig $stateProvider.state singleConfig for childConfig in centerConfig $stateProvider.state childConfig ] app.config whenConfig app.config stateConfig 

C’è un nuovo plunker funzionante (estendendo il router UI-Router $ urlRouterProvider. Quando non funziona * più * ) , che dovrebbe funzionare con la versione 0.2.13+

Soluzione precedente

Fino alla versione 0.2.12- , potremmo usare $urlRouterProvider.when() , suggerito in documenation (piccola citazione) :

Procedura: impostare uno stato secondario predefinito / indice


se vuoi che l’URL ‘parent.index’ sia non vuoto, imposta un reindirizzamento nel tuo module.config usando $ urlRouterProvider:

  $urlRouterProvider.when('/home', '/home/index'); 

Quindi questa era la soluzione mostrata nel Q & A sopra menzionato:

 var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) { $urlRouterProvider .when('/app/list', ['$state', 'myService', function ($state, myService) { $state.go('app.list.detail', {id: myService.Params.id}); }]) .otherwise('/app'); }]; ... app.config(whenConfig) 

Ora – non possiamo.

UI-Router “FIX” in 0.2.13

È dovuto a “FIX” (di cui sono semplicemente poco sicuro) , menzionato nella versione 0.2.13

Correzioni di bug
$ Stato:
– …
– Evita di risincronizzare dall’URL dopo .transitionTo ( b267ecd3 , chiude # 1573 )

Ed ecco il nuovo codice aggiunto in urlRouter.js :

 if (lastPushedUrl && $location.url() === lastPushedUrl) // this line stops the corrent .when to work return lastPushedUrl = undefined; lastPushedUrl = undefined; 

Questo pezzo di codice sta ottimizzando / risolvendo qualche altro problema … ma anche, distriggersndo la funzionalità .when()

SOLUZIONE

Come già accennato, questo nuovissimo plunker mostra la via con la versione 0.2.13+. Dobbiamo solo ascoltare i cambiamenti di stato, e se lo stato è “app.list” possiamo andare al suo dettaglio con qualche id …

 var onChangeConfig = ['$rootScope', '$state', function ($rootScope, $state) { $rootScope.$on('$stateChangeStart', function (event, toState) { if (toState.name === "app.list") { event.preventDefault(); $state.go('app.list.detail', {id: 2}); } }); }] 

Controlla il plunker qui

Puoi farlo anche nel tuo controller. Penso che sia più pulito di ascoltare i cambiamenti di stato.

Esempio:

 .controller 'YourControllerName', ($scope, $state) -> $state.go "center.question" if $state.is "center"