0

我正在使用路线和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>.

如何解决这个问题？

4

1 回答 1

1

你可以让你的模板使用 Angular 服务注册它们的链接，然后在你的 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>
于 2012-11-05T09:37:38.750 回答