我在页面正文中使用路由和ng-view
:
<!doctype html>
<html ng-app="app">
<head>
...
</head>
<body>
<div ng-view></div>
</body>
</html>
我的模板中包含<link>
个元素:
<link rel="stylesheet" type="text/css" href="style.css">
问题是IE8无法识别正文中的<link>
元素。和<style>
以及其他人一样。它似乎忽略了它们。他们必须在<head>
。因此,我的模板必须拆分,一部分需要转到<head>
,另一部分转移到<body>
。
如何解决这个问题?
答案 0 :(得分:1)
您可以让模板使用Angular Service注册其链接,然后在head标签中添加一个控制器,用于填充链接列表。
以下是一个示例:http://plnkr.co/edit/1a6U9f
app.factory('LinkService', function() {
var links = {};
return {
links: links,
addLink: function(href, relation) {
links[href] = { href: href, relation: relation };
},
removeLink: function(href) {
delete links[href];
}
};
});
app.controller('LinkController', function($scope, LinkService) {
$scope.links = LinkService.links;
});
app.controller('Template1Controller', function($scope, LinkService) {
LinkService.addLink('template1.css','stylesheet');
$scope.$on('$destroy', function() {
LinkService.removeLink('template1.css');
});
});
然后在你的html(用于演示目的的内联部分)中:
<head ng-controller="LinkController">
...
<link rel="{{link.relation}}" ng-href="{{link.href}}" ng-repeat="link in links">
</head>
<body ng-controller="MainCtrl">
<!-- You could use ng-view here -->
<ng-include src="someTemplateField"></ng-include>
<script type="text/ng-template" id="template1">
<div class="red" ng-controller="Template1Controller">Template 1</div>
</script>
</body>