Wie benutzt man ng-href mit absoluter URL?

Question

Ich bin noch neu bei angularjs, und ich habe ein Problem, dass ich nicht in der Lage bin, eine Lösung zu finden, und ich habe keine Zeit, in Winkelquelle zu gehen.

Das ist mein Szenario:

ich einige JSON-Daten mit Sammlung von URLs, die ich auf dem Bildschirm angezeigt werden soll. Ich habe ein Element mit ng-repeat="link in links" und innen I

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

haben, das funktioniert, aber alle Links verweisen auf mydomain/apppath/valueoflink.title Ich möchte, dass sie absolut sein, nur valueoflink. Titel ohne Präfix.

Wie angular sagen, dass es absolut nicht relative URL ist?

Answer 1

Ich löste es durch Voranstellen von Daten in JSON mit 'http: //', um sie absolute URLs zu machen, und AngularJs respektiert das.

Dann verstand ich, dass eckig ist eigentlich nichts mit Wert tun, es ist nur so, wie es ist, und es ist meine Schuld, das zu sehen.

Aktualisierung Code löst dieses Problem, wenn alle URLs sind wie 'www.google.com'

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

Plain altes 'Inspect Element' ungedecktes Problem, und ich ignorierte die Tatsache, dass ng-href bindet von { {Wert}} Syntax, deshalb ist mein erster Versuch, ng-href="'http://'+{{value}}" zu setzen, fehlgeschlagen und hat mich dazu gebracht, eine Frage vorzeitig zu stellen, aber ich bin mir nicht sicher, ob ich es löschen sollte, da ich nicht nur einer bin, der einen solchen Fehler macht.

Answer 2

Wie Goran sagte, wird seine Lösung nur funktionieren, wenn alle URLs wie "www.google.com" sind.

Wenn Sie eine Kombination aus verschiedenen Arten von URLs haben, e.x. 'Www.google.com', 'https://github.com', 'http://goo.gl', 'github.com' können Sie ng-href mit einem Winkelfilter verwenden:

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

und einen Filter, der wird anhängen ' http: //‘zu Ihrer URL, wenn es beginnt mit '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; 
}; 

Answer 3

Für nur eine externe URL verwenden, Filter sind zu komplex. Das folgende ist ein Ausschnitt, der auf meiner Website youteiming.com verwendet wird, um auf Yahoo! Finance News auf einem Ticker wie AMZN in ticker.tick.name gespeichert. "Ticker" ist die Loop-Variable von ng-repeat, "ng-repeat = 'ticker in portf.tickers".

<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> 

Nach dem ng-href doc (https://docs.angularjs.org/api/ng/directive/ngHref), der Grund ng-href zu verwenden ist „Verwenden von Angular Markup wie {{hash}} in einem href-Attribute wird der Link zu der falschen URL gehen machen, wenn Der Benutzer klickt darauf, bevor Angular eine Chance hat, das {{hash}} Markup durch seinen Wert zu ersetzen. ", um den Nebeneffekt zu stoppen, während die 2-Wege-Datenbindung durch" :: "ausgeschaltet wird Grund, du zuerst ng-ob ob ticker.tick.name verfügbar ist: Wenn ja, konstruiere die URL; Andernfalls wird der Code beibehalten, bis er verfügbar ist.

Wenn merkliche Zeit benötigt wird, bis ticker.tick.name verfügbar wird, sollten Sie die RESTful-Call-Verzögerung oder den Netzwerkverkehr überprüfen, anstatt zu versuchen, komplexe Lösungen vom Frontend bereitzustellen.