在项目中，由于要兼容到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. Qt通过UDP传图片，实现自定义分包和组包

    一.包头结构体 //包头 struct PackageHeader { //包头大小(sizeof(PackageHeader)) unsigned int uTransPackageHdrSize; ...

  2. Android实现透明的颜色效果

    android Button或者ImageButton背景透明状态设置 设置Button或ImageButton的背景为透明或者半透明 半透明< Button android:backgroun ...

  3. 在VS2010中使用Git(转)

    在之前的一片博客<Windows 下使用Git管理Github项目>中简单介绍了在Windows环境中使用Git管理Github项目,但是是使用命令行来进行操作的,本文将简单介绍下在VS2 ...

  4. Control character in cookie value, consider BASE64 encoding your value

    这是因为你给Cookie设置了中文的value,比如Cookie c = new Cookie("user", "张三");

  5. SNMP SNMP协议

    SNMP协议 一.什么是SNMP? SNMP是简单网络管理协议[Simple Network Management Protocol],由一组网络管理的标准组成,包含一个应用层协议(applicati ...

  6. 《Linux/Unix系统编程手册》读书笔记 目录

    <Linux/Unix系统编程手册>读书笔记1  (创建于4月3日,最后更新4月7日) <Linux/Unix系统编程手册>读书笔记2  (创建于4月9日,最后更新4月10日) ...

  7. TCSRM5961000

    一直没想到怎么去重 看了眼别人的代码...so easy啊 同余啊 唉..脑子被僵尸吃掉了 难得1000出个简单的 #include <iostream> #include<cstd ...

  8. 什么是HotSpot VM & 深入理解Java虚拟机

    参考 http://book.2cto.com/201306/25434.html 另外,这篇文章也是从一个系列中得出的: <深入理解Java虚拟机:JVM高级特性与最佳实践(第2版)> ...

  9. Python3 学习第十弹： 模块学习三之数字处理

    math模块 提供基础的数学函数, cos(3.14) = -0.999..(弧度制) acos(1) = 0.0 sqrt(9) = 3.0 degrees(3.14) = 179.9999..(弧 ...

  10. C#操作office进行Excel图表创建，保存本地，word获取

    ,新建C#控制台应用程序(Excel创建图表) using System; using System.Collections.Generic; using System.Linq; using Sys ...