Bedingt fügen Sie target = "_ blank" zu Links mit Angular JS hinzu
Baue ich eine Navigationsstruktur in Angular JS. Die meisten links in der Baumstruktur auf Seiten innerhalb meiner website, aber einige können Sie auf externe Seiten zeigen.
Wenn das href des link beginnt mit http://oder https://dann nehme ich an, dass der link für eine externe Website (ein regex wie /^https?:\/\//
funktioniert der trick).
Ich möchte target="_blank" - Attribut auf diese links. Ich hatte gehofft, dies mit eckigen wenn ich Schaffe meine links:
<ul>
<li ng-repeat="link in navigation">
<a ng-href="{{link.href}}" [add target="_blank" if link.href matches /^https?:\/\//]>{{link.title}}</a>
</li>
</ul>
Kann mir jemand helfen?
Dank
Kommentar zu dem Problem
Nicht wirklich tun. Es ist schlecht von einem UI-Sicht. Ermöglicht die Benutzer entscheiden, Wann Sie öffnen neuer Fenster oder tabs.
Ich weiß, was du meinst, aber wenn der Benutzer auf der website und möchte Sie auf einen link zu einer externen Ressource, macht es Sinn, den link zu öffnen in einem neuen tab / Fenster anstatt umleiten Ihre aktuellen tab. Ich benutze es sparsam und nur wenn ich denke, dass wird geleitet von der site Weg, ohne es tab offen bleiben, wäre irritierend / verwirrend für einige Nutzer.
Nein. Wenn ein Benutzer auf eine Webseite und möchte einen link zu klicken, dann macht es Sinn, die öffnen sich im selben tab. Wenn Sie möchten, um es zu öffnen in einem neuen tab, werden Sie Strg-klicken oder mit der rechten Maustaste und sagen Sie "in neuer Registerkarte öffnen". NICHT brechen web-Konventionen.
@BenGuest Web-Konventionen? Sie haben diese Idee Recht. Ich bin bereit, das karma auf diese ein.
@GoodPerson - Es gibt sicherlich Szenarien, in denen das gut ist von einer UX-Perspektive. Unsere AngularJS-Projekt ist ein SPA. Benutzer, Tippen/klicken Sie auf die links wollen, um den link zu öffnen, ohne Ihre Arbeit in der app. Das öffnen in einem neuen tab standardmäßig ist ein geeigneter Weg, um dieses Bedürfnis zu befriedigen.
InformationsquelleAutor der Frage Ben Guest | 2014-05-10
Du musst angemeldet sein, um einen Kommentar abzugeben.
Update
Oder verwenden Sie eine Richtlinie:
Verwendung:
Wenn Sie nicht brauchen, um verwenden Sie das mit Angular-routing können Sie verwenden Sie einfach diese:
InformationsquelleAutor der Antwort Sebastian
Ich war gerade dabei, erstellen Sie eine Richtlinie wie vorgeschlagen und dann realisiert, dass alles, was Sie wirklich tun müssen, ist dieses:
ng-attr-xyz
können Sie dynamisch erstellen@xyz
, und wenn der Wertundefined
kein Attribut erstellt-genau das, was wir wollen.InformationsquelleAutor der Antwort Mark Birbeck
Den vorgeschlagenen Lösungen funktioniert nur mit hart codierten hrefs. Sie werden scheitern, wenn Sie interpoliert, weil Winkel nicht getan haben, eine interpolation, wenn die Richtlinie ausgeführt wird. Die folgende Lösung funktioniert auf interpolierten hrefs, und basiert auf Javarome Lösung:
InformationsquelleAutor der Antwort w.brian
Einer einfachen Richtlinie erfordert keine änderungen in Ihre HTML durch die Bearbeitung
<a href="someUrl">
tags und das hinzufügentarget="_blank"
wenn someURL zielt nicht auf die aktuelle host:InformationsquelleAutor der Antwort Javarome