AngularJS：ui路由器href重寫爲ui-sref

我有一個內容管理系統，強制網頁的URL爲特定模式。我們需要有條件地重寫這些鏈接的hrefs。AngularJS：ui路由器href重寫爲ui-sref

CMS將打印在頁面上是這樣的：

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

我們的路由器需要實際指向

#/zoo/gorilla

如果我們寫了這個鏈接自己，它會是什麼樣子：

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

問題是，我們不能總是保證/ zoo/gorilla部分意味着我們在動物園（'gor利亞'）。

最簡單的方法是將解析CMS網址到路由器的網址，只是這樣做：

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

我明白爲什麼這是典型的對UI的路由器的想法，但我希望能找到一種方法將它用於這一個奇怪的案例。

來源

2015-04-15 oooyaya

我認爲這會起作用，基本上是一條指令，用於在您點擊它時更改指向哪個URL。

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

這樣使用它：

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

來源

2015-04-15 16:41:19

我問嘗試過這一點。更改href會將URL指向正確的哈希，但狀態不會識別此更改。 – oooyaya

@oooyaya更改了代碼以允許路由器查看更改 –

這就是我所做的。這個問題其實是另一回事 - 使用ui-router命名的子視圖，並且必須將它們定位在視圖對象中。這就是爲什麼這個觀點從未改變 - 我沒有告訴它去哪裏。 – oooyaya

它看起來就像走進危險區，但您可以創建的「href」指令，它會自動替換href屬性的值。無需額外的屬性需要的，但它可能使你的代碼有點曖昧......

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

來源

2015-04-15 17:08:54

我們做了類似的事情。也許它是一個虛假的症狀。 href確實發生了變化，並且URL在我們點擊時變成我們想要的，但視圖不會改變。有沒有一些明顯的東西呢？它匹配路線和部分載荷，但它從不顯示。 – oooyaya

嗯，看到這個：http://jsfiddle.net/erykpiast/zog1yaxy/1/。它只是工作... –

AngularJS：ui路由器href重寫爲ui-sref

回答

相關問題