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

AngularJS自定义指令(Directives)在IE8下的一个坑的更多相关文章

  1. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  2. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  3. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  5. [vue]vue条件渲染v-if(template)和自定义指令directives

    条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <di ...

  6. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  7. angularJS——自定义指令

    主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...

  8. 利用angularJs自定义指令（directive）实现在页面某一部分内滑块随着滚动条上下滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

  9. angularJs自定义指令（directive）实现滑块滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

随机推荐

  1. 272. Closest Binary Search Tree Value II

    题目: Given a non-empty binary search tree and a target value, find k values in the BST that are close ...

  2. Java：集合for高级循环遍历

    增强for循环: 格式:for(变量数据类型 要遍历的变量 :元素所在数组(集合)名称) 也即 for(Type element: array或collection) 使用foreach遍历集合: 只 ...

  3. 重新格式化hdfs系统的方法

    重新格式化hdfs系统的方法: (1)查看hdfs-ste.xml <span style="font-size:18px;"><property> < ...

  4. OpenGL环境搭建Windows+Mac+Linux

    OpenGL环境搭建Windows+Mac+Linux Mac平台下 下载列表:GLFWcmake 下载的GLFW解压缩 然后安装cmake, 安装好cmake之后打开 1.browse source ...

  5. BZOJ 2743 采花（树状数组）

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2743 题意:给出一个数列,每个询问查询[L,R]中至少出现两次的数字有多少种? 思路:(1 ...

  6. 三方贸易-drop ship

    一．三方贸易的简单理解 三方贸易:即当客户向我方下达采购订单要求订购货物,我方再向供应商下达相同采购订单,并要求供应商直接送货至客户处的交易形式,待交易完成后,由供应商向我方开具应收票据,我方向客户开 ...

  7. Android项目真的要去做混淆(加密)处理

    以前做项目做是懒得混淆代码,因为要处理各种第三方的混淆东西,像友盟里面加了第三方库,又要特殊处理混淆操作,所以很麻烦,也懒得去做混淆操作,so 你懂的:但今天我用一个反编译工具,发现一个很可怕的事情 ...

  8. MVC 3 基本操作增加修改

    在MVC中实现基本的增删改和传统的asp .net 程序有很大的不同,刚开始使用MVC还是有些不太适应,但是它的页面简洁也相当的不同,同时对服务器的访问性能上也有很大的提高.基于此,下面对我学习过程记 ...

  9. shader复杂与深入：Normal Map（法线贴图）1

    转自:http://www.zwqxin.com/archives/shaderglsl/review-normal-map-bump-map.htmlNormal Map法线贴图,想必每个学习计算机 ...

  10. 【Todo】所有Locked的题目的分析解答

    下面这个链接有比较全的leetcode题目包括锁的 http://www.cnblogs.com/grandyang/p/4606334.html https://leetcode.com/probl ...