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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。