javascript - multiple - angularjs ui router ui sref

Cómo agregar guid regex en el estado ui-router angular

Question

Tengo esta ruta

.state(''mystate'', {
    url: ''/{id}'',
    templateUrl: ''/views/partial.html''
});

El id param debe ser un guid en forma como esta "2a542f61-5fff-4607-845d-972e6c3ad1e4". ¿Cómo agrego esto en la url "url: ''/ {id:? Qué debo poner aquí}''".

Answer 1

Después de mucho ensayo y error, se me ocurrió:

$urlMatcherFactoryProvider.type(''guid'', {
    encode: angular.identity,
    decode: angular.identity,
    equals: function(a, b) { return a.toUpperCase() === b.toUpperCase(); },
    is: function(val) {
        // Local to avoid any lastIndex issues
        var GUID_REGEXP = /^[a-f/d]{8}-(?:[a-f/d]{4}-){3}[a-f/d]{12}$/i;
        return GUID_REGEXP.test(val);
    },
    // No anchors or flags with pattern
    pattern: /[a-fA-F/d]{8}-(?:[a-fA-F/d]{4}-){3}[a-fA-F/d]{12}/
});

Esto se basa en la respuesta de @ just-boris. Una diferencia clave es el pattern . Sin esto, parece que los GUID no válidos no activarán $urlRouterProvider.otherwise() .

Answer 2

Hay un plunker de trabajo

Podemos simplemente proporcionar regexp en la definición de url:

url: "/{id:(?:[a-fA-F0-9]{8}(?:-[a-fA-F0-9]{4}){3}-[a-fA-F0-9]{12})}",

Lea más acerca de nuestras opciones para la definición de URL:

http://angular-ui.github.io/ui-router/site/#/api/ui.router.util.type:UrlMatcher

pequeño fragmento:

''{'' name '':'' regexp|type ''}'' - marcador de posición rizado con regexp o nombre de tipo. En caso de que la expresión regular contenga llaves, deben estar en pares iguales o escaparse con una barra diagonal inversa.

Answer 3

Puede definir su propio tipo de parámetro.

var GUID_REGEXP = /^[a-f/d]{8}-([a-f/d]{4}-){3}[a-f/d]{12}$/i;
$urlMatcherFactoryProvider.type(''guid'', {
  encode: angular.identity,
  decode: angular.identity,
  is: function(item) {
     return GUID_REGEXP.test(item);
  }
});

Aquí hay un escaparate en Plunker con esta solución

A continuación, especifique este tipo en la expresión de la ruta url:

.state(''mystate'', {
  url: ''/{id?guid}'',
  templateUrl: ''/views/partial.html''
});

Puede leer más en esa página en documentos