绝对 URL 的行为类似于相对 URL答案

【问题标题】：Absolute URLs behave like relative URLs绝对 URL 的行为类似于相对 URL
【发布时间】：2015-11-13 22:02:17
【问题描述】：

我的应用的页脚中有一堆链接（Angular 1.3.15）。

html

<section class="footer-projects">
        <div class="container">
            <div class="row">
                <section ng-repeat="area in ::links">
                    <h4 ng-bind="area.title"></h4>
                    <ul>
                        <li ng-repeat="project in ::area.projects">
                            <a href="{{project.url}}" ng-bind="project.name"></a>
                        </li>
                    </ul>
                </section>
            </div>
        </div>
    </section>

ng-repeat 循环遍历此

js 常量

'use strict';

require('./footer.module.js')
    .constant('FooterLinkConstants', [
        {
            title: 'Space',
            projects: [
                {
                    name: 'Galaxy Zoo',
                    url: 'http://www.galaxyzoo.org/'
                },
                {
                    name: 'Moon Zoo',
                    url: 'http://www.moonzoo.org/'
                },
                {
                    name: 'Solar Storm Watch',
                    url: 'http://www.solarstormwatch.com/'
                },
                {
                    name: 'Planet Hunters',
                    url: 'http://planethunters.org/'
                },
                {
                    name: 'Planet Four',
                    url: 'http://planetfour.org/'
                },
                {
                    name: 'Radio Galaxy Zoo',
                    url: 'http://radio.galaxyzoo.org/'
                },
                {
                    name: 'Stardate M83',
                    url: 'http://www.projectstardate.org/'
                },
                {
                    name: 'Disk Detective',
                    url: 'http://diskdetective.org/'
                }
            ]
        }
    ]);

这是我的指令

js 指令

'use strict';

require('./footer.module.js')
    .directive('appFooter', appFooter);

// @ngInject
function appFooter($state, FooterLinkConstants) {
    var directive = {
        link: appFooterLink,
        restrict: 'A',
        replace: true,
        templateUrl: 'footer/footer.html'
    };
    return directive;

    function appFooterLink(scope) {
        scope.links = FooterLinkConstants;
        });
    }
}

在开发中一切正常。但是，当我部署到远程服务器地址时，该地址会添加到我上面列表中的值之前。例如：

而不是

http://www.galaxyzoo.org/

我明白了

http://preview.zooniverse.org/folgerdemo/http://galaxyzoo.org/

您可以查看live example（只需检查页脚中的链接）

那为什么会这样呢？

其他问题，如this，建议通过在地址中包含协议来使用绝对网址；我已经在做。

我很确定我错过了一些明显的东西，但可以用一双新鲜的眼睛来做。

【问题讨论】：

尝试在模板中直接使用ng-href 而不是href
@MikeVranckx 刚刚使用 ng-href 部署了模板，但并不高兴。
@Visualife 为什么要使用 api 帮助？ window.location.href 只是返回当前的 url。
这真是莫名其妙。您是否使用任何其他可能干扰 href 属性分配的库？您能否提供一个较小的示例，或者至少是一个未缩小的示例？
可能你的 HTML 被转义了，尝试使用 html 过滤器

标签： javascript angularjs url

【解决方案1】：

没错。不幸的是，只有我能知道答案 - 显然不是因为这很困难，而是因为我没有提供问题中的所有信息。

我将自己的应用程序构建为别人的衍生产品。该应用使用 Gulp 作为任务管理器。

原来这一行

gulp.src(filename).pipe(replace(/(href=")(?![http|\/\/])/g, '$1' + prefix)),

prefix 的值取决于所使用的 AWS S3 存储桶的类型，正在替换我的网址。

一旦我注释掉那行，一切就恢复正常了。

感谢评论并为浪费您的时间道歉的人;）

【讨论】：