Question

我还是刚刚接触过angularjs，我有一个问题，我似乎无法找到解决方案，而且我没有时间去研究角度来源。

这是我的情景：

我有一些json数据，其中包含我想要在屏幕上显示的网址集。我有一个ng-repeat="link in links"的元素，里面有

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

可行，但所有链接都指向 mydomain / apppath / valueoflink.title 我希望它们是绝对的，只有 valueoflink.title ，没有任何前缀。

如何判断角度是绝对的而不是相对的URL？

Answer 1

正如Goran所说，只有当所有网址都像www.google.com＆＃39;

时，他的解决方案才有效。

如果你有不同类型网址的组合，e.x。＆＃39; www.google.com＆＃39;，＆＃39; https://github.com＆＃39;，＆＃39; http://goo.gl＆＃39;，＆＃39; github.com＆＃39 ;，您可以将ng-href与角度过滤器一起使用：

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

和一个过滤器，它将附加＆＃39; http：//＆＃39;到您的网址，如果它以＆＃39; <＆＃39;：

开头

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

我通过在json中用'http：//'前缀数据来解决它，使它们成为绝对的url，而angularjs则尊重它。

然后我明白，角度实际上并没有做任何有价值的事情，它只是把它放在那里，而且看到它是我的错。

当所有网址都像'www.google.com'

时，

将代码更新为此解决问题

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

普通的旧'检查元素'未发现问题，我忽略了ng-href与{{value}}语法绑定的事实，所以这就是为什么我第一次尝试放ng-href="'http://'+{{value}}"失败并引导我问过早地提出问题，但我不确定是否应该删除它，因为我可能不只是犯了这样的错误。

Answer 3

仅使用外部网址，过滤器过于复杂。以下是我的网站youtiming.com用于访问Yahoo!的片段。财务新闻在AMZN等股票代码存储在ticker.tick.name中。＆＃34;股票＆＃34;是来自ng-repeat的循环变量，＆＃34; ng-repeat =＆＃39; portf.tickers＆＃39;＆＃34;＆＃34;。

<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的原因是＆＃34;在href属性中使用像{{hash}}这样的Angular标记会使链接转到如果用户在Angular有机会用{{hash}}标记替换其值之前单击它，则会显示错误的URL。＆＃34;，以便在关闭双向数据绑定时停止副作用＆＃34; ::＆＃34;出于性能原因，首先是ng-if ticker.tick.name是否可用：如果是，则构造URL;否则，代码将一直保持到可用。

如果ticker.tick.name可用时间明显，则应检查RESTful服务呼叫滞后或网络流量，而不是尝试从前端提供复杂的解决方案。

如何使用绝对网址的ng-href？

3 个答案: