AngularJS自定义指令(Directives)在IE8下的一个坑

在项目中，由于要兼容到IE8，我使用1.2.8版本的angularJS。这个版本是支持自定义指令的。我打算使用自定义指令将顶部的header从其他页面分离。也就是实现在需要header的页面只用在<body>后面加上<header></header>这个HTML标签就可以了，这样还能实现页面的语义化，而且也能在IE8中实现HTML5标签。以后很多部分都可以这一写，如搜索则可以变成<serach></serach>这样。但是在写好了后，才发现只有IE8不能这样写。（因为我是在LINUX系统下，只有在写好了才区IE测试。）代码如下

var demoDirectives = angular.module('demoDirectives', []);
/**
 * @namespace header
 * @desc 自定义angular指令<header>
 * @example <caption>Example usage of header.</caption>
 * // html
 *<header class="nav"></header>
 * @memberof angular_module.demoApp.demoDirectives
 */
demoDirectives.directive('header', function () {
  return {
    restrict: 'E',
    templateUrl: 'demo/header.html'
  };
});

<body>
    <header class="navbar navbar-inverse" ng-controller="NavDirectiveCtrl"></header>
    <div ng-view class="container"></div>
</body>

最后改成这样才能用

var demoDirectives = angular.module('demoDirectives', []);
/**
 * @namespace header
 * @desc 自定义angular指令<header>
 * @example <caption>Example usage of header.</caption>
 * // html
 *<header class="nav"></header>
 * @memberof angular_module.demoApp.demoDirectives
 */
demoDirectives.directive('header', function () {
  return {
    templateUrl: 'demo/header.html'
  };
});

<body>
    <div header class="navbar navbar-inverse" ng-controller="NavDirectiveCtrl"></div>
    <div ng-view class="container"></div>
</body>