Get reference to base URL in AngularJS controller

Question

I am using HTML5 mode in AngularJS and I have a <base href="/some/base/path" /> defined in the <head> section of my HTML file.

What is the best way of reading this value in AngularJS? I understand that you can just read this HTML tag with jQuery, but something tells me this is not the most elegant way of doing it.

What I want to achieve

I would like to compose URL dynamically from controller. For instance, current page is http://localhost/myapp/some/custom/page/ where http://localhost/myapp is a base url. I want to build http://localhost/myapp/another/page url in angular controller by doing the following

baseUrl + `/another/page`

This feels like an XY Problem. Angular has ways to handle your URL strings, URL parameters, etc.. Usually knowing the <base> isn't necessary to perform any angular logic, and as @JBNizet stated, you haven't mentioned what you want to achieve by reading this information. — Claies
– Claies, Commented Jan 3, 2016 at 10:39

Meeh · Accepted Answer · 2016-01-03 09:13:50Z

1

AngularJS doesn't really have any functions for extracting attributes from tags. However, there are a workaround. But the pure javascript way I added at the bottom of the answer might be the best solution for you.

Let's say you change the base tag:

<base ng-controller="MyController" data-href="/some/base/path">

In your controller you can do the following to access data-href:

app.controller('MyController', function ($scope, $attrs) {
  console.log($attrs.href); // Prints '/some/base/path'
});

Or you can do it in pure javascript with:

var url = document.getElementsByTagName('base')[0].getAttribute('href');

edited Jan 3, 2016 at 9:13

answered Jan 3, 2016 at 9:06

Meeh

2,6763 gold badges19 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sergei Ledvanov Over a year ago

Thanks, I know that it's possible to access base via DOM, but I thought there is slightly more elegant solution out there for AngularJS

Collectives™ on Stack Overflow

Get reference to base URL in AngularJS controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related