Как использовать ng-href с абсолютным URL-адресом?

Я все еще новичок в angularjs, и у меня есть проблема, по которой я, похоже, не могу найти решение, и у меня нет времени, чтобы заглянуть в источник angular.

Это мой сценарий:

У меня есть некоторые данные json с набором URL-адресов, которые я хочу показать на экране. У меня есть элемент с ng-repeat="link in links" и внутри я

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

Это работает, но все ссылки указывают на mydomain/apppath/valueoflink.title Я хочу, чтобы они были абсолютными, только valueoflink.title без префикса.

Как сообщить angular, что это абсолютный не относительный URL?

Ответ 1

Я решил это, префиксные данные в json с помощью "http://", чтобы сделать их trully абсолютными URL-адресами, и угловое отношение к этому.

Тогда я понял, что angular на самом деле ничего не делает со значением, он просто помещает его туда, как есть, и я виноват в этом.

обновление кода для этого решает проблему, когда все URL-адреса похожи на "www.google.com"

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

Обычная старая проблема "проверить элемент", и я проигнорировал тот факт, что ng-href связывается с синтаксисом {{value}}, поэтому вот почему моя первая попытка поместить ng-href="'http://'+{{value}}" не удалась и заставила меня преждевременно задавать вопрос, но я не уверен, что я должен удалить его, поскольку я могу не только сделать такую ошибку.

Ответ 2

Как сказал Горан, его решение будет работать, только если все URL-адреса похожи на "www.google.com".

Если у вас есть комбинация разных типов URL-адресов, e.x. 'www.google.com', 'https://github.com', 'http://goo.gl', 'github.com ', вы можете использовать ng-href с фильтром angular:

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

и фильтр, который добавит "http://" к вашему URL-адресу, если он начинается с "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;
};

Ответ 3

Для использования внешнего URL фильтр слишком сложный. Ниже приведен фрагмент, используемый на моем веб-сайте, youtiming.com, для доступа к Yahoo! Новости финансов на тикер, такой как AMZN, хранящийся в файле ticker.tick.name. "тикер" - это переменная цикла из ng-repeat, "ng-repeat =" тикер в portf.tickers ".

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

В соответствии с документом ng-href (https://docs.angularjs.org/api/ng/directive/ngHref), причина использования ng-href: "Использование разметки Angular {{hash}} в атрибуте href приведет к тому, что ссылка перейдет к неправильному URL-адресу, если пользователь нажмет на нее до того, как Angular сможет заменить {{hash}} разметку своим значением.", поэтому, чтобы остановить побочный эффект при отключении двухсторонней привязки данных по значению "::" по соображениям производительности, вы сначала ng - если доступно ticker.tick.name: если да, создайте URL-адрес; в противном случае код будет удерживаться, пока он не станет доступным.

Если время для добавления ticker.tick.name становится заметным, вы должны проверить отставание или сетевой трафик службы RESTful, а не пытаться предоставить комплексное решение из front-end.