javascript - example - ui view ui router

Angular UI-Router $ urlRouterProvider. Cuando no estoy funcionando cuando hago clic en<a ui-sref==……>

Question

Tengo .when(''/center'', ''/center/question'') en mi aplicación web angular.

Cuando escribo ''/center'' en mi navegador, se redireccionará a ''/center/question'' como esperaba, pero cuando hago clic en <a ui-sref="center" href="#/center"></a> , no redireccionará y solo permanecerá en la url ''/center'' .

No hay error en mi consola y no sé por qué.

Veo un problema similar aquí Angular UI-Router $ urlRouterProvider. Cuando ya no funciona . Intento la respuesta pero aún no funciona para mí.

Aquí está mi código de 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

Answer 1

Hay un nuevo desplumador de trabajo (que extiende el Angular UI-Router $ urlRouterProvider. Cuando ya no funciona * ) * , que debería funcionar con la versión 0.2.13+

Solución anterior

Hasta la versión 0.2.12- , podríamos usar $urlRouterProvider.when() , sugerido en la documentación (pequeña cita) :

Cómo configurar un estado secundario predeterminado / índice

...
si desea que la url ''parent.index'' no esté vacía, configure un redireccionamiento en su module.config usando $ urlRouterProvider:

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

Así que esta fue la solución mostrada en las preguntas y respuestas mencionadas anteriormente:

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) 

Ahora no podemos.

UI-Router "FIX" en 0.2.13

Se debe a "FIX" (del cual simplemente no estoy seguro) , mencionado en la versión 0.2.13

Corrección de errores
$ estado:
- ...
- Evite volver a sincronizar desde la URL después de .transitionTo ( b267ecd3 , cierra #1573 )

Y aquí está el nuevo código agregado en urlRouter.js :

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

lastPushedUrl = undefined;

Este fragmento de código está optimizando / solucionando algún otro problema ... pero también, desactivando la funcionalidad .when()

SOLUCIÓN

Como ya se mencionó, este nuevo plunker muestra el camino con la versión 0.2.13+. Solo tenemos que escuchar el cambio de estado, y si el estado es "app.list" podemos ir a su detalle con algún 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});
    }
  });

}]

Compruebe el plunker aquí

Answer 2

También puedes hacer esto en tu controlador. Creo que es más limpio que escuchar los cambios de estado.

Ejemplo:

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