17

我还是 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？

4

3 回答 3

18

正如 Goran 所说，他的解决方案只有在所有 url 都像“www.google.com”的情况下才有效。

如果您有不同类型的 url 的组合，例如“www.google.com”、“https://github.com”、“http://goo.gl”、“github.com”，则可以使用带有角度过滤器的 ng-href：

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

和一个过滤器，如果它以“www”开头，它将附加“http://”到您的网址：

'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-18T12:00:08.833 回答
14

我通过在 json 中的数据前加上“http://”来解决它，以使它们成为真正的绝对 URL，并且 angularjs 尊重这一点。

然后我明白了 Angular 实际上并没有做任何有价值的事情，它只是把它原样放在那里，这是我的错。

当所有网址都像“www.google.com”时，更新代码可以解决问题

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

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

于 2014-02-07T09:42:59.863 回答
0

对于仅使用外部 URL，过滤器过于复杂。以下是在我的网站 youtiming.com 上用于访问 Yahoo! 的片段。存储在ticker.tick.name 中的诸如AMZN 之类的股票代码上的财经新闻。“ticker”是来自 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>

根据 ng-href 文档（https://docs.angularjs.org/api/ng/directive/ngHref），使用 ng-href 的原因是“在 href 属性中使用像 {{hash}} 这样的 Angular 标记将如果用户在 Angular 有机会将 {{hash}} 标记替换为其值之前单击它，则使链接转到错误的 URL。”，因此为了在关闭 2-way 数据的同时停止副作用- 出于性能原因，通过 "::" 绑定，您首先 ng-if 是否 ticker.tick.name 可用：如果是，则构造 URL；否则，代码将保留到可用为止。

如果ticker.tick.name 变得可用需要相当长的时间，您应该检查您的RESTful 服务调用延迟或网络流量，而不是尝试从前端提供复杂的解决方案。

于 2016-09-17T20:59:26.120 回答