It is possible to set the href attribute of a base tag in AngularJs?

问题

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'
  });

回答1:

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

AngularJS Guide: Bootstrapping - Things to keep in mind
AngularJS API: module ng

来源：https://stackoverflow.com/questions/30049927/it-is-possible-to-set-the-href-attribute-of-a-base-tag-in-angularjs

标签

javascript

angularjs

debugging

html5-history

base-url