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

时间：2022-11-19 15:21:00

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:

我想基于常量值设置基本标记的href属性值。为此,我在head元素中声明了base属性,如下所示:

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

and I set the baseUrl value with this code snippet:

并使用此代码段设置baseUrl值:

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

where env is the Angular constant.

其中env是角度常数。

The locationProvider is configured in this way:

locationProvider以这种方式配置:

.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:

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

<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:

其中items是默认路由路径:

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

1 个解决方案

#1

0  

Set the base href in JavaScript via createElement, then do manual bootstrapping:

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

References

#1

0  

Set the base href in JavaScript via createElement, then do manual bootstrapping:

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

References

标签：

相关文章