È possibile impostare l'attributo href di un tag base in AngularJs?

Desidero impostare il valore dell'attributo href del tag base in base a un valore costante. Per farlo ho dichiarato l'attributo base nell'elemento head come segue:È possibile impostare l'attributo href di un tag base in AngularJs?

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

e impostare il valore baseUrl con questo frammento di codice:

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

dove env è la costante angolare.

Il locationProvider è configurato in questo modo:

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

quando l'eseguo vedo il valore impostato correttamente:

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

ma nella console ottengo questo errore:

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

Se imposto direttamente l'attributo href senza ngHref:

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

ottengo questo errore:

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)

Dove items è il percorso predefinito di routing:

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

fonte

2015-05-05 Fedy2

Questo potrebbe essere perché la posizione html5 api. prova a mettere * $ locationProvider.html5Mode (true); * nella tua applicazione ** config ** function. –

Sto impostando html5Mode su true. – Fedy2

se si utilizza html5 posizione api invece hashbang angolare (! #), Non è necessario usare * ng-href *, basta usare ** href ** nel proprio elemento ** base **. –

Impostare il base href in JavaScript tramite createElement, quindi effettuare il bootstrap manuale:

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

Riferimenti

fonte

2016-08-25 06:40:04

È possibile impostare l'attributo href di un tag base in AngularJs?

risposta

Problemi correlati