javascript - ejemplo - ui router state params

ui-router angular: obtener información de $ state de toState en resolución

Question

Actualización : esto debería ser posible en angular-ui-router a partir de 1.0.0alpha0 . Consulte las notas de la versión https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0 y el problema https://github.com/angular-ui/ui-router/issues/1018 I creado.

Me gustaría acceder al nombre del estado y a otros atributos a los que la aplicación está usando el ui-router angular cuando se trabaja en la resolución.

La razón: quiero cargar algunos datos de usuario (incluidos sus derechos de acceso) de forma asincrónica antes de permitir que la aplicación ingrese esa página.

Actualmente esto no es posible porque inyectar $ state en los puntos de resolución al estado en el que está navegando fuera de la forma, no a la que está navegando.

Sé que puedo:

• obtener el toState en otro lugar con $ rootScope (''$ stateChangeStart'') y guardarlo en mi servicio de configuración, por ejemplo. Pero creo que es un poco desordenado.
• codifique el estado en la resolución, pero no quiero reutilizar mi resolución para todas las páginas

También creé un problema en el ui-router github (¡Por favor + 1 si está interesado!): https://github.com/angular-ui/ui-router/issues/1018

Aquí está mi código hasta ahora. Cualquier ayuda apreciada!

.config(function($stateProvider) {

    $stateProvider.state(''somePage'', {
        // ..
        resolve: {
            userData: function($stateParams, $state, Settings) {
                return Settings.getUserData() // load user data asynchronously
                    .then(function (userData) {
                        console.log($stateParams);
                        console.log($state);
                        // Problem: $state still points to the state you''re navigating away from
                    });
            }
        }
    });
});

Answer 1

Actualización para Ui-Router 1.x

$provide.decorator(''$state'', ($delegate, $transitions) => {
    $transitions.onStart({}, (trans) => {
      $delegate.toParams = trans.params()
      $delegate.next = trans.to().name
    })
    return $delegate
  })

Ui-Router 0.x

Siempre puede decorar $state con las propiedades next y toParams :

angular.config(function($provide) {
  $provide.decorator(''$state'', function($delegate, $rootScope) {
    $rootScope.$on(''$stateChangeStart'', function(event, state, params) {
      $delegate.next = state;
      $delegate.toParams = params;
    });
    return $delegate;
  });
});

Y usar como tal:

.state(''myState'', {
    url: ''/something/{id}'',
    resolve: {
        oneThing: function($state) {
            console.log($state.toParams, $state.next);
        }
    }
});

Answer 2

Así que descubrí la respuesta a esto yo mismo. Si su código se comporta como el mío, el objeto $ stateParams se inyecta correctamente, pero $ state es un objeto de estado vacío (o antiguo).

Lo que funcionó para mí fue hacer referencia a this en la función de resolución:

.state(''myState'', {
    url: ''/something/{id}'',
    templateUrl: ''/myTemplate.html'',
    controller: function() {},
    resolve: {
        oneThing: function($stateParams) {
            console.log($stateParams); // comes through fine
            var state = this;
            console.log(state); // will give you a "raw" state object
        }
    }
})

El primer registro devolverá lo que esperas. El segundo registro devolverá un objeto de estado "en bruto" (a falta de un término mejor). Entonces, por ejemplo, para obtener el nombre del estado, puede acceder, this.self.name .

Me doy cuenta de que esto no es preferido ... sería mucho mejor si $state (u otro objeto estandarizado) pudiera proporcionarnos esta información a la resolución, pero esto es lo mejor que pude encontrar.

Espero que ayude...

Answer 3

this.toString () le dará el nombre del estado