I want to set the href attribute value of base tag based on a constant value. To do so I've declared the base attribute in the head element as follows:
<head>
<base ng-href="{{baseUrl}}">
</head>
and I set the baseUrl value with this code snippet:
app.run(["$rootScope","env", function($rootScope, env){
$rootScope.baseUrl = env.baseUrl;
}]);
where env is the Angular constant.
The locationProvider is configured in this way:
.config(function ($locationProvider) {
$locationProvider.html5Mode(true);
})
When I run it I see the value set correctly:
<base ng-href="/" href="/">
but in the console I get this error:
Error: [$location:nobase] $location in HTML5 mode requires a <base> tag to be present!
http://errors.angularjs.org/1.3.14/$location/nobase
at REGEX_STRING_REGEXP (angular.js:63)
at $LocationProvider.$get (angular.js:11293)
at Object.invoke (angular.js:4185)
at angular.js:4003
at getService (angular.js:4144)
at Object.invoke (angular.js:4176)
at angular.js:4003
at getService (angular.js:4144)
at Object.invoke (angular.js:4176)
at angular.js:6485
If I set the href attribute directly without ngHref:
<base href="{{baseUrl}}">
I get this error:
Error: Failed to execute 'replaceState' on 'History': A history state object with URL 'http://items/' cannot be created in a document with origin 'http://localhost:9000'.
at Error (native)
at Browser.self.url (http://localhost:9000/bower_components/angular/angular.js:5044:56)
at setBrowserUrlWithFallback (http://localhost:9000/bower_components/angular/angular.js:11313:18)
at http://localhost:9000/bower_components/angular/angular.js:11435:15
at Scope.$get.Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:14401:28)
at Scope.$get.Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:14217:31)
at Scope.$get.Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:14506:24)
at bootstrapApply (http://localhost:9000/bower_components/angular/angular.js:1448:15)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4185:17)
at doBootstrap (http://localhost:9000/bower_components/angular/angular.js:1446:14)
Where items is the default routing path:
.otherwise({
redirectTo: 'items'
});
Set the base href in JavaScript via createElement, then do manual bootstrapping:
/* Create base element */
var base = document.createElement('base');
/* Create script element */
var script = document.createElement('script');
/* Set base href */
base.href = "http://example.com";
/* Set script src */
script.src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js";
/* Append base tag to body */
document.getElementsByTagName("body")[0].appendChild(base);
/* Append script tag to head */
document.getElementsByTagName("head")[0].appendChild(script);
function html5Mode ($locationProvider)
{
$locationProvider.html5Mode(true);
};
function dothis()
{
//template string
var html = "<div>ID: {{$id}} Phase: {{$$phase}} Destroyed: {{$$destroyed}} listeners: {{$$listeners}} root: {{$root}}</div>";
//template object
var template = angular.element(html);
//template transformer
var compiler = angular.injector(["ng"]).get("$compile");
//template result
var linker = compiler(template);
//scope object
var scope = angular.injector(["ng"]).get("$rootScope");
//scope binding
var result = linker(scope)[0];
/* Append result to body */
document.body.appendChild(result);
/* Render */
angular.bootstrap(document, ['ng', html5Mode]);
}
script.onload = dothis;References
来源：https://stackoverflow.com/questions/30049927/it-is-possible-to-set-the-href-attribute-of-a-base-tag-in-angularjs