Question

我在页面正文中使用路由和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>。

如何解决这个问题？

Answer 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>

将<link />嵌入到模板中

1 个答案: