I have a collection of links displayed in the footer section of my Angular 1.3.15 app.
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>
The ng-repeat function iterates through the listed items.
JS Constants
'use strict';
require('./footer.module.js')
.constant('FooterLinkConstants', [
{
title: 'Space',
projects: [
{
name: 'Galaxy Zoo',
url: 'http://www.galaxyzoo.org/'
},
...
]
}
]);
This is the custom directive implemented:
JS Directive
'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;
});
}
}
During development everything functions properly. However, after deploying to a remote server, the server's address is added to the existing URLs in the footer list. For example:
instead of
http://www.galaxyzoo.org/
The URL becomes:
http://preview.zooniverse.org/folgerdemo/http://galaxyzoo.org/You can view the live demo (inspect the footer links).
What could be causing this issue?
Some other resources, like this one, suggest using absolute URLs by including the protocol within the addresses; which I have already done.
I feel like I might be overlooking something obvious and would appreciate a fresh perspective on the matter.