可以在 AngularJs 中设置基本标签的 href 属性吗？答案

【问题标题】：It is possible to set the href attribute of a base tag in AngularJs?可以在 AngularJs 中设置基本标签的 href 属性吗？
【发布时间】：2015-07-15 00:10:36
【问题描述】：

我想根据常量值设置base标签的href属性值。为此，我在head 元素中声明了base 属性，如下所示：

<head>
  <base ng-href="{{baseUrl}}">
</head>

我用这个代码 sn-p 设置baseUrl 值：

app.run(["$rootScope","env", function($rootScope, env){   
    $rootScope.baseUrl = env.baseUrl;
}]);

其中env 是角度常数。

locationProvider是这样配置的：

.config(function ($locationProvider) {
 $locationProvider.html5Mode(true);
})

当我运行它时，我看到值设置正确：

<base ng-href="/" href="/">

但在控制台中我收到此错误：

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

如果我直接设置 href 属性而不使用 ngHref:

<base href="{{baseUrl}}">

我收到此错误：

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)

其中items是默认路由路径：

 .otherwise({
    redirectTo: 'items'
  });

【问题讨论】：

这可能是因为 html5 location api。尝试将 $locationProvider.html5Mode(true); 放入您的应用程序 config 函数中。
我将 html5Mode 设置为 true。
如果你使用 html5 location api 而不是 angular hashbang(!#)，不需要使用 ng-href，只需在你的基础元素。
使用 href 我得到一个不同的错误，我已经更新了问题。
您能否将 binding 替换为 / 的静态值。即** **

标签： javascript angularjs debugging html5-history base-url

【解决方案1】：

通过createElement在JavaScript中设置base href，然后进行手动引导：

    /* 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;

参考文献

【讨论】：