AngularJS: ui-router href riscrive in ui-sref

Question

Ho un CMS che obbliga gli URL alle pagine a essere di un certo modello. Abbiamo bisogno di riscrivere condizionalmente gli hrefs di questi link.

Il CMS verrà stampata sulla pagina qualcosa come:

<a href="/path/to/the/zoo/gorilla.html">Go</a> 

nostro router ha la necessità di puntare in realtà per

#/zoo/gorilla 

Se avessimo scritto questo link noi stessi, sarebbe simile:

<a ui-sref="zoo('gorilla')>Go</a> 

Il problema è che non possiamo sempre garantire che la parte/zoo/gorilla significhi che siamo allo zoo ('gor illa ').

Il modo più semplice sarebbe quella di analizzare l'url CMS in all'URL router e solo fare qualcosa di simile:

link.attr("href", "#/zoo/gorilla"); 

capisco perché questo è in genere contro l'idea stessa di ui-router, ma sono Spero di trovare un modo per usarlo per questo strano caso.

Answer 1

Penso che funzionerebbe, fondamentalmente una direttiva per modificare l'URL verso cui si fa clic quando si fa clic.

module.directive('newHref', ['$location',function($location) { 
    return function(scope, element, attrs) { 
     element.bind('click', newHref); 

     function newHref(event) { 
      var hrefList = event.target.href.split("/"); 
      var parent = hrefList[hrefList.length-2]; 
      var child = hrefList[hrefList.length-1].split(".")[0]; 

      $location.path("/" + hrefList.slice(0, hrefList.length-2).join("/") + "/" + parent + "/" + child); 
     } 
    } 
}]); 

utilizzarlo come:

<a href="/path/to/the/zoo/gorilla.html" new-href>Go</a> 

Answer 2

Sembra come entrare in zona pericolosa, ma è possibile creare direttiva "href" che sostituirà automaticamente il valore dell'attributo href. No attributi extra necessari, ma può rendere il codice un po 'ambiguo ...

module 
    .directive('href', function() { 
    return function(scope, element, attrs) { 
     var ngUrl; // convert CMS url to Angular URL somehow 
     if(attrs.href === '/path/to/the/zoo/gorilla.html') { 
      ngUrl = '#/zoo/gorilla'; 
     } 

     element[0].href = ngUrl; 
    }; 
}); 

See here