可以在AngularJs中设置基本标签的href属性？ [英] It is possible to set the href attribute of a base tag in AngularJs?
本文介绍了可以在AngularJs中设置基本标签的href属性？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想根据常量值设置 href 属性值 base 标签。为此，我已经在头元素中声明了 base 属性，如下所示：
< head>
< base ng-href ={{baseUrl}}>
< / head>
，我用这个设置了 baseUrl 代码片段：
app.run（[$ rootScope，env），function（$ rootScope，env）{
$ rootScope.baseUrl = env.baseUrl;
}]）;
其中 env 是角度常数。 / p>
locationProvider 以这种方式配置：
.config（function（$ locationProvider）{
$ locationProvider.html5Mode（true）;
}）
当我运行它时，我看到正确设置的值：
< base ng-href =/href =/>
但在控制台中我收到此错误：
错误：[$ location：nobase] $位置在HTML5模式下需要< base>标签要存在！
http://errors.angularjs.org/1.3.14/$location/nobase
在REGEX_STRING_REGEXP（angular.js：63）
$ LocationProvider $ get（angular.js： 11293）
在Object.invoke（angular.js：4185）
at angular.js：4003
在getService（angular.js：4144）
在Object.invoke（有角度.js：4176）
at angular.js：4003
at getService（angular.js：4144）
在Object.invoke（angular.js：4176）
有角度。 js：6485
如果我直接设置href属性，而没有ngHref：
< base href ={{baseUrl}}>
我收到此错误：
错误：无法在历史记录上执行replaceState：无法在原始文件http：// localhost中创建具有URLhttp：// items /的历史状态对象： 9000'。
在Error（native）
在Browser.self.url（http：// localhost：9000 / bower_components / angular / angular.js：5044：56）
在setBrowserUrlWithFallback（http： /localhost:9000/bower_components/angular/angular.js:11313:18）
在http：// localhost：9000 / bower_components / angular / angular.js：11435：15
在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）
在Scope。$ get.Scope。$ apply（http：// localhost：9000 / bower_components / angular / angular.js：14506：24）
在bootstrapApply（http：// localhost：9000 / bower_components / angular / angular.js：1448：15）
在Object.invoke（http：// localhost：9000 / bower_components / angular / angular.js：4185： 17）
在doBootstrap（http：// localhost：9000 / bower_components / angular / angular.js：1446：14）
其中项目是默认路由路径：
.otherwi se（{
redirectTo：'items'
}）;
解决方案
在JavaScript中设置基础，然后进行手动引导：
/ *创建基元* / var base = document.createElement（'基础'）; / *创建脚本元素* / var script = document.createElement（'script'）; / *设置基础href * / base.href =http://example.com; / *设置脚本src * / script.src =http://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js; / *将基本标签附加到body * / document.getElementsByTagName（body）[0] .appendChild（base）; / *将脚本标签附加到头部* / document.getElementsByTagName（head）[0] .appendChild（script）;函数html5Mode（$ locationProvider）{$ locationProvider.html5Mode（true）; };函数dothis（）{// template string var html =< div> ID：{{$ id}}阶段：{{$$ phase}}被破坏：{{$$ 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 links = compiler（template）; // scope object var scope = angular.injector（[ng]）。get（$ rootScope）; // scope binding var result = linker（scope）[0]; / *将结果附加到body * / document.body.appendChild（result）; / *渲染* / angular.bootstrap（document，['ng'，html5Mode]）; } script.onload = dothis;
strong>
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:
<head>
<base ng-href="{{baseUrl}}">
</head>
and I set the baseUrl value with this code snippet:
app.run(["$rootScope","env", function($rootScope, env){
$rootScope.baseUrl = env.baseUrl;
}]);
where env is the Angular constant.
The locationProvider is configured in this way:
.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:
<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'
});
解决方案
Set the base in JavaScript, then do manual 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;
References
这篇关于可以在AngularJs中设置基本标签的href属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
