AngularJS: ui-router href przepisuje na ui-sref

Question

Mam system CMS, który wymusza adresy URL stron o określonym wzorze. Musimy warunkowo przepisać href do tych linków.

CMS zostanie wydrukowany na stronie coś takiego:

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

naszym routerze musi rzeczywiście wskazują na

#/zoo/gorilla 

Gdybyśmy pisemnej ten link siebie, to będzie wyglądać:

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

Problem polega na tym, że nie zawsze możemy zagwarantować, że część/zoo/goryl oznacza, że ​​jesteśmy w zoo ("gor illa ").

Najprostszym sposobem byłoby analizować url CMS do adresu routera i po prostu zrobić coś takiego:

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

rozumiem dlaczego tak jest zazwyczaj przeciwko samej idei UI-router, ale I” Mam nadzieję, że znajdę sposób na wykorzystanie tego jednego dziwnego przypadku.

Answer 1

Myślę, że to działałoby, w zasadzie dyrektywa zmieniająca adres, do którego zmierzasz po kliknięciu.

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); 
     } 
    } 
}]); 

używać go jak:

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

Answer 2

To wygląda jak wejście do strefy niebezpiecznej, ale można tworzyć „href” dyrektywę, która będzie automatycznie zastąpić wartość atrybutu href. Bez dodatkowych atrybuty potrzebne, ale może to uczynić kod nieco dwuznaczny ...

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