如何使用絕對url的ng-href？

我還是新來的angularjs，我有一個問題，我似乎無法找到解決方案，我沒有時間去看角度來源。如何使用絕對url的ng-href？

這是我的情景：

我有一些JSON數據與我想在屏幕上顯示的URL的集合。我有一個元素與ng-repeat="link in links"我在內心裏有

<a ng-href="{{link.url}}">{{link.title}}</a>

這樣的作品，但所有的鏈接指向MYDOMAIN/APPPATH/valueoflink.title 我想他們是絕對的，只有valueoflink。標題沒有任何前綴。

如何分辨角，這是絕對不相對URL？

來源

2014-02-07 Goran Obradovic

我解決它通過JSON與前綴數據的「http：//」，使他們真實地絕對URL，並angularjs尊重這一點。

這才明白角度實際上沒有做與任何有價值的東西，它只是把它那裏，因爲它是我們的，是我的錯，一看就知道。

更新代碼來解決這個問題的時候所有的URL都像「www.google.com」

<a ng-href="http://{{link.url}}">{{link.title}}</a>

普通老式「檢查元素」未覆蓋的問題，我忽略了一個事實，從NG-HREF結合{ {值}}語法，所以這就是爲什麼我第一次把ng-href="'http://'+{{value}}"嘗試失敗，並導致我過早地問一個問題，但我不知道我是否應該刪除它，因爲我可能不是唯一一個作出這樣的錯誤。

來源

2014-02-07 09:42:59

至於戈蘭說，他的解決方案將只工作如果所有網址都像「www.google.com」。

如果您有不同類型的URL的組合，e.x. 'www.google.com'， 'https://github.com'， 'http://goo.gl'， 'github.com'，可以使用NG-HREF具有角濾波器：

<a ng-href="{{link.url|myFilter}}">{{link.title}}</a>

和過濾器，這將追加' http'//'，如果它以'www'開頭：

'use strict'; 
myApp.filter("myFilter", function() { 
return function (link) { 
    var result; 
    var startingUrl = "http://"; 
    var httpsStartingUrl = "https://"; 
    if(link.startWith(startingUrl)||link.startWith(httpsStartingUrl)){ 
     result = link; 
    } 
    else { 
    result = startingUrl + link; 
    } 
    return result; 
} 
}); 
String.prototype.startWith = function (str) { 
return this.indexOf(str) == 0; 
};

來源

2014-12-18 12:00:08 Tonven

您的解決方案看起來像問題。 'github.com' - 您返回'github.com' – Mediator

@Mediator我改變了腳本，所以它現在總是會在鏈接中附加「http」前綴。你現在可以試試嗎？ – Tonven

我沒有嘗試，我剛剛審查。所以現在看起來不錯。 – Mediator

對於只使用外部URL，過濾器太複雜。以下是我的網站youtiming.com用於訪問Yahoo!的一個片段。在Ticker.tick.name中存儲的股票等金融新聞，例如AMZN。「ticker」是來自ng-repeat的循環變量，「ng-repeat ='portf.tickers'中的ticker」。

<div ng-if="ticker.tick.name"> 
    <a href="http://finance.yahoo.com/quote/{{::ticker.tick.name}}/news?p={{::ticker.tick.name}}">{{::ticker.tick.name}} News from Yahoo! Finance</a> 
</div>

按照NG-HREF DOC（https://docs.angularjs.org/api/ng/directive/ngHref），使用NG-HREF原因是「採用了棱角分明的標記像{{哈希}}在href屬性將會使鏈接到錯誤的URL，如果用戶在Angular有機會用其值替換{{hash}}標記之前單擊它。「，所以爲了停止副作用，同時通過」::「關閉雙向數據綁定以獲得性能原因，你首先ng - 如果ticker.tick.name是否可用：如果是，則構造URL;否則，代碼將一直保持到可用。

如果ticker.tick.name變得可用需要很長時間，您應該檢查RESTful服務呼叫延遲或網絡流量，而不是試圖從前端提供複雜的解決方案。

來源

2016-09-17 20:59:26

如何使用絕對url的ng-href？

回答

相關問題