Có thể đặt thuộc tính href của thẻ cơ sở trong AngularJs?

Tôi muốn đặt giá trị thuộc tính href của base thẻ dựa trên giá trị không đổi. Để làm như vậy tôi đã tuyên bố base thuộc tính trong các yếu tố head như sau:Có thể đặt thuộc tính href của thẻ cơ sở trong AngularJs?

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

và tôi thiết lập giá trị baseUrl với đoạn mã này:

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

nơi env là hằng số góc.

Các locationProvider được cấu hình theo cách này:

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

Khi tôi chạy nó tôi thấy giá trị thiết lập một cách chính xác:

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

nhưng trong giao diện điều khiển tôi nhận được lỗi này:

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

Nếu tôi đặt thuộc tính href trực tiếp mà không có ngHref:

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

tôi nhận được lỗi này:

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)

đâu items là con đường định tuyến mặc định:

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

Nguồn

2015-05-05 Fedy2

này có thể là do vị trí html5 api. thử đặt * $ locationProvider.html5Mode (true); * trong hàm ** config ** của ứng dụng của bạn. –

Tôi đang đặt html5Mode thành true. – Fedy2

nếu bạn đang sử dụng vị trí html5 api thay vì góc băm (! #), Không cần sử dụng * ng-href *, chỉ cần sử dụng ** href ** trong phần tử ** base ** của bạn. –

Đặt base href trong JavaScript qua createElement, sau đó làm thủ công bootstrapping:

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

Tài liệu tham khảo

Nguồn

2016-08-25 06:40:04

Có thể đặt thuộc tính href của thẻ cơ sở trong AngularJs?

Trả lời

Các vấn đề liên quan