Question

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

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

并使用此代码段设置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

如果我在没有ngHref的情况下直接设置href属性：

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

Answer 1

通过base在JavaScript中设置createElement 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;

<强>参考

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

1 个答案: