Angular UI-Router $ urlRouterProvider. Quand ne fonctionne pas lorsque je clique sur <a ui-sref="…">

J'ai un. .when('/center', '/center/question') dans mon application web angulaire.

Lorsque je tape '/center' dans mon navigateur, il redirige vers '/center/question' comme je l'espère, mais lorsque je clique sur <a ui-sref="center" href="#/center"></a> , Il ne redirige pas et reste sur l'url '/center' .

Il n'y a pas d'erreur dans ma console et je ne sais pas pourquoi.

Je vois un problème similaire ici Angular UI-Router $ urlRouterProvider. Quand je ne travaille plus. Je tente la réponse, mais ça ne fonctionne toujours pas pour moi.

Voici mon code 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 

Il y a un nouveau plumeur fonctionnant (étendant le routeur UI angulaire $ urlRouterProvider. Lorsqu'il ne fonctionne plus * plus * ) , qui devrait fonctionner avec la version 0.2.13+

Solution précédente

Jusqu'à la version 0.2.12- nous pourrions utiliser $urlRouterProvider.when() , suggéré dans la documentation (petite citation) :

Comment: Configurer un état enfant par défaut / index


Si vous souhaitez que l'URL 'parent.index' soit non vide, configurez une redirection dans votre module.config en utilisant $ urlRouterProvider:

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

Donc, cette solution a été présentée dans les Q & A mentionnés ci-dessus:

 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) 

Maintenant, nous ne pouvons pas.

UI-Router "FIX" en 0.2.13

Il est dû à "FIX" (dont je ne suis tout simplement pas sûr) , mentionné dans la version 0.2.13

Correction de bogues
$ État:
– …
– Évitez de vous ré-synchroniser à partir de l'ordre après .transitionTo ( b267ecd3 , ferme # 1573 )

Et voici le nouveau code ajouté dans urlRouter.js :

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

Ce code optimise / corrige un autre problème … mais aussi, désactive la fonctionnalité .when()

SOLUTION

Comme nous l'avons déjà mentionné, ce nouveau pistolet montre la voie avec la version 0.2.13+. Nous devons juste écouter les changements d'état, et si l'état est "app.list", on peut consulter ses détails avec un identifiant …

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

Vérifiez le plongeur ici

Vous pouvez également le faire dans votre contrôleur. Je pense que c'est plus propre que d'écouter les changements d'état.

Exemple:

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