All geek questions in one place

Can I set the href attribute of a base tag in AngularJs?

I want to set the value of the href attribute of a base tag based on a constant value. To do this, I declared the base attribute on the head element as follows:

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

and I set the baseUrl value using this piece of code:

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

where env is an Angular constant.

locationProvider configured as follows:

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

When I launched it, I correctly understood the meaning:

 <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' });
+6
source share
1 answer

Set base href in JavaScript via createElement , then do a manual download:

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

0
source

Source: https://habr.com/ru/post/986564/

More articles:


All Articles