在项目中，由于要兼容到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>