注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

isblog主页

或许不一定要做得最多,但一定要做得最好! 能力就是一种财富,积累越多,就越体现你

 
 
 

日志

 
 

AngularJS兼容IE的处理(转)  

2013-10-23 23:13:15|  分类: Html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自1:http://blog.regou.me/?p=739

 

 最近在学些AngularJS,感觉挺强大的。
但是如果想投入到生产环境中,还需要考虑到IE6,7的兼容问题。

官方文档提到如何兼容IE了,但是即使全部按照文档里说的做,其实还是不能做到在IE6,7下运行。

经过各种实践,在这里给出一个补充:
需要在html标签上添加id=”ng-app”和class=”ng-app:APPNAME”,于是一个标准的ng-app的标签应该是:(app名为myapp为例)

##注意下面的“HTMLTAG”必须是合法的html标签,永远不要使用自定义标签,否则依然不兼容IE
< HTMLTAG ng-app="myapp" class="ng-app:myapp" id="ng-app">
   ....
< /HTMLTAG>

这样就行了,以上是唯一的和官网说明不同的地方.

另附官网文档所说的让IE兼容JSON2和HTML5标签的JS在这,直接引用进head标签里就行了里就行了(这两个JS也是必要的)

<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"></script>
< script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>

随便做了一个demo,兼容IE67:
http://tools.regou.me/angularJS.html

2013.6.22更新
目前我在正式的生产环境中,用AngularJS+jQueryMobile+PhoneGap在做一个B2B商城APP
分享了点AngularJS用户手机APP开发的心得:


 

转自2:http://www.cnblogs.com/lcllao/archive/2012/09/21/2696206.html

Internet Explorer Compatibility

 

一、总括

  这文章描述Internet ExplorerIE)处理自定义HTML属性、标签的特性(可以理解为“特别糟糕的性质”)。如果我们打算让应用兼容IE8以及以下的版本,那么可以继续往下看。

 

二、Short Version(简述)

  为了让我们的angular应用在IE上工作,请确保:

  1. 按需引入JSON.stringifyIE7或以下的都需要这玩意)。我们可以使用JSON2https://github.com/douglascrockford/JSON-js)或者JSON3http://bestiejs.github.com/json3/)。

  2. 不要使用自定义标签,诸如<ng:view>(用属性版代替,如<div ng-view>)。如果还是想使用,则请看第3点。

  3. 如果你确实想使用自定义标签,那么你必须做以下步骤,让老IE认识你的自定义标签。

   

复制代码
<html xmlns:ng="http://angularjs.org">
<head>
<!--[if lte IE 8]>
<script>
    document.createElement('ng-include');
    document.createElement('ng-pluralize');
    document.createElement('ng-view');
  

    // Optionally these for CSS
    document.createElement('ng:include');
    document.createElement('ng:pluralize');
    document.createElement('ng:view');
</script>
<![endif]-->
</head>
<body>
    ...
</body>
</html>
复制代码

需要关注的是:

  • xmls:ng - 命名空间 对于每一个我们计划使用的自定义标签,都需要有一个命名空间。
  • document.createElement(“自定义标签名称”) - 自定义标签名称的创建 因为这是旧版IE一个问题,我们需要通过IE判断注释(<!--[if lte IE 8]>…<![endif]-->)来特殊处理。对于每一个没有命名空间或者非HTML默认标签,都需要进行这种预定义,以让IE不会犯傻(例如没样式…)。

 

三、Long Version(详情)

  IE对于非标准HTML标签的处理会有问题。这大致可以氛围两类(有、无命名空间),每一类都有他自己的一个解决方式。

  • 如果标签名称以”my:”开头的话,将被当作命名空间,必须要一个想对应的命名空间定义(<html xmlns:my=ignored>)。
  • 如果标签没有命名空间(xx:开头),但并非一个标准的HTML的话,需要通过document.createElement(“标签名称”)进行声明。
  • 如果我们打算对自定义标签定义样式的话,我们必须使用document.createElement(“标签名称”)来进行自定义,regardless of XML命名空间(实验证明,regardless of XML namespace意思很有可能是:不用管有命名空间的自定义标签)。

 

四、The Good News(好消息)

  好消息是,这个限制仅仅是对于元素名称的,对属性名称没影响。所以不需要对自定义属性(<div> my-tag your:tag></div>)做特殊处理。

 

五、What happens if I fail to do this?(没做这些处理的话,会发生什么事呢?!)

  假设我们有一个非标准的HTML标签(对于my:tag或者my-tag都有一样的结果。但测试过后,发现命名空间方式不会有这种烦恼)。

<html>
    <body>
        <mytag>some text</mytag>
    </body>
</html>

  

  一般来说,将会转换为一下的DOM结构:
DE>#documentDE>
DE>    DE>DE>+- HTMLDE>
DE>        DE>DE>+- BODYDE>
DE>            DE>DE>+- mytagDE>
DE>                DE>DE>+-DE> DE>#text: some textDE>

   我们期望的,是BODY元素有一个mytag子元素,mytag又有一个文本子元素”some text”。

 

  但IE不是这么干的(如果做了纠正措施,则不包括在内)!

DE>#documentDE>
DE>    DE>DE>+- HTMLDE>
DE>        DE>DE>+- BODYDE>
DE>             DE>DE>+- mytagDE>
DE>             DE>DE>+-DE> DE>#text: some textDE>
DE>             DE>DE>+- /mytagDE>

   在IE里面,BODY将会有3个孩子元素:

  1. 一个自闭合的” mytag”,与<br/>类似。末尾的“/”是可选的,但<br>标签不允许有任何子元素,所以浏览器将其分为<br>some text</br>三个兄弟元素,而不是单独的<br>元素中含有some text元素。

  2. 一个文本节点“some text”。这本来应该是mytag元素的子节点,不是它的兄弟节点。

  3. 一个错误的自闭合标签” /mytag”,说它错误,是因为元素名称不允许含有”/”字符(在最后应该是允许的<br/>)。此外,闭合元素不应该是DOM的一部分(不应该以元素形式出现),因为它只用作勾画DOM结构的边界。

 

六、CSS Styling of Custom Tag Names(对自定义标签进行CSS样式定义)

  如果想让CSS选择器对自定义元素有效,那么自定义元素必须通过document.createElement(“元素名称”)进行预定义,regardless of XML namespace(实验证明,这里是不用管有XML命名空间的?!)

  这里是自定义标签样式定义的例子:

 

复制代码
<!DOCTYPE html>
<html xmlns:ng="needed for ng: namespace">
<head>
    <title>IE Compatbility</title>
    <!--[if lte IE 8]>
    <script>
        // needed to make ng-include parse properly
        document.createElement('ng-include');

        // needed to enable CSS reference
        document.createElement('ng:view');//注释掉也可以?!
    </script>
    <![endif]-->
    <style>
        ng\:view {
            display: block;
            border: 1px solid red;
            width:100px;
            height:100px;
        }

        ng-include {
            display: block;
            border: 1px solid blue;
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <ng:view></ng:view>
    <ng-include></ng-include>
</body>
</html>
复制代码

 

By Lcllao.

  评论这张
 
阅读(2705)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018