web-dev-qa-db-fra.com

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

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

Quand je tape '/center' dans mon navigateur, il sera redirigé vers '/center/question' comme je m'y attendais mais quand je clique sur le <a ui-sref="center" href="#/center"></a>, il ne redirigera pas et restera simplement 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 il ne fonctionne plus . J'essaie la réponse, mais il reste ne fonctionne 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
javascriptangularjscoffeescriptangular-ui-router
17
J22Melody

Il y a un nouveau plunker qui fonctionne (étendant le Angular UI-Router $ urlRouterProvider .quand il ne fonctionne plus * * ), qui devrait être travailler 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 voulez que l'url 'parent.index' ne soit pas vide, alors configurez une redirection dans votre module.config en utilisant $ urlRouterProvider:

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

C'était donc la solution montrée dans le Q & A mentionné 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" dans 0.2.13

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

Corrections de bugs
$ état:
- ...
- Évitez de resynchroniser à partir de l'URL après .transitionTo ( b267ecd , ferme # 157 )

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

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

lastPushedUrl = undefined;

Ce morceau de code optimise/corrige un autre problème ... mais aussi, en désactivant la .when() fonctionnalité

SOLUTION

Comme déjà mentionné, ce tout nouveau plunker montre la voie avec la version 0.2.13+. Nous devons juste écouter le changement d'état, et si l'état est "app.list", nous pouvons aller dans ses détails avec un 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});
    }
  });

}]

Vérifiez le plunker ici

20
Radim Köhler

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"
2
Roi