AngularJS 应用要在 Internet Explorer 9-11 上正常运行需要做哪些属性适配

AngularJS 应用要在 Internet Explorer 9-11 上正常运行需要做哪些属性适配

【免费下载链接】angular.jsAngularJS - HTML enhanced for web apps!项目地址: https://gitcode.com/gh_mirrors/an/angular.js

如果你的 AngularJS 应用要部署到 Internet Explorer 9–11，模板里普通的插值写法（{{...}}写在属性上）会在 IE 里失效：浏览器会在 AngularJS 插值完成之前就把这些属性值改掉或直接报错。AngularJS 官方文档为此给出了明确的属性适配清单（见 IE 兼容指南 和 插值指南），本文按“先确认支持范围、再逐项替换属性、最后按文档现象核对结果”的顺序说明操作过程。

先确认版本支持边界

在动手改模板之前，先确认你的 AngularJS 版本与 IE 版本的对应关系，文档中的支持边界如下：

• 项目当前支持并会修复 IE 9 及以上的 bug，持续集成会对 IE9、IE10、IE11 运行全部单元测试。
• AngularJS 1.3 起不再支持 IE8；AngularJS 1.2 会继续支持 IE8，但核心团队不计划花时间处理 IE8 及其更早版本特有的问题。
• 文档没有针对 IE8 及以下浏览器运行测试。部分功能可能在这些浏览器上可用，但需要你自己针对具体应用测试后决定。
• 官方 FAQ 列出的测试浏览器为：最新版 Chrome、Firefox、Safari、Safari for iOS，以及 Internet Explorer 9–11（见 FAQ）。

如果你的目标浏览器落在 IE8 或更早，文档不保证行为，这部分不在本文的适配范围内。

逐项替换插值写法

以下四条适配来自 IE 兼容指南，每一条都给出 IE 中会发生的错误行为，按模板中实际用到的属性逐条检查。

1.style属性改用ng-style

style="{{ someCss }}"这种写法在 Chrome、Firefox、Safari 和 Edge 中可用，但在 Internet Explorer（包括 IE11）中不生效。改用ng-style指令：

<!-- IE 中不生效的写法 --> <span style="{{ someCss }}">Sample Text</span> <!-- 改用 ng-style --> <span ng-style="someCss">Sample Text</span>

ng-style的表达式取值是一个以 CSS 属性名为键的对象，例如myStyle为{'background-color': 'orange'}时，写成ng-style="myStyle"（用法示例可参考 ngStyle 实现中的例子）。

2. 按钮的type属性改用ng-attr-type

在<button>上直接写type="{{ someExpression }}"时，Internet Explorer 会在 AngularJS 有机会插值之前，把表达式覆盖成type="submit"。改用：

<!-- IE 会把表达式覆盖为 type="submit" --> <button type="{{ someExpression }}">Submit</button> <!-- 改用 ng-attr-type --> <button ng-attr-type="{{ someExpression }}">Submit</button>

3. 进度条的value属性改用ng-attr-value

在<progress>上直接写value="{{ someExpression }}"时，Internet Explorer 会在插值发生之前把表达式覆盖成value="0"。改用：

<!-- IE 会把表达式覆盖为 value="0" --> <progress value="{{ someExpression }}"></progress> <!-- 改用 ng-attr-value --> <progress ng-attr-value="{{ someExpression }}"></progress>

4. 文本域的placeholder属性改用ng-attr-placeholder

在<textarea>上直接写placeholder="{{ someExpression }}"时，Internet Explorer 10 和 11 会在访问无父节点的TextNode的nodeValue时抛出错误。改用：

<!-- IE 10/11 中会报错的写法 --> <textarea placeholder="{{ someExpression }}"></textarea> <!-- 改用 ng-attr-placeholder --> <textarea ng-attr-placeholder="{{ someExpression }}"></textarea>

ng-attr 绑定的行为规则

ng-attr-*是 AngularJS 提供的通用属性绑定前缀（见 插值指南）：带ng-attr-前缀的绑定在绑定阶段会被应用到对应的去前缀属性上，从而绕开浏览器对某些属性值的提前处理——上面四条适配都依赖这个机制。

使用ng-attr时有两条需要记住的行为规则：

1. allOrNothing语义：插值字符串中只要有一个表达式结果为undefined，对应属性会被整体移除，而不是写入部分字符串。如果你的属性值是拼接多个表达式，注意undefined分支会直接让属性消失。
2. camelCase 属性用下划线：需要绑定 SVG 这类天然带 camelCase 的属性（如viewBox）时，用下划线声明，例如ng-attr-view_box="{{viewBox}}"。

插值指南中还列出了已知存在属性绑定问题的清单，与上面的适配项一一对应：<select>的size、IE 10/11 中<textarea>的placeholder、IE 11 中<button>的type、IE 11 中<progress>的value。如果你的模板涉及这些属性，按同样方式改用ng-attr-*前缀。

另外，文档提醒不要同时使用插值与ngStyle修改同一个style属性内容（例如style="color: {{ 'orange' }};"再叠加ngStyle），原字符串被求值时会覆盖你的改动。

IE11 中disabled与后代表单控件的坑

除了上面四类属性替换，文档还指出一个 IE11 特有的结构问题：在带有后代表单控件的元素上使用disabled属性，会导致意外的行为：

• 后代input元素中绑定ng-model的值不会反映模型（也不会反映模型的变更）；
• placeholder属性的值会被作为 input 的值插入；
• 后代的select元素会变得不可操作，就像被加了disabled一样。

文档给出的规避方式有两条：

1. 避免在含有后代表单控件的元素上，用disabled作为自定义属性指令的标识符；
2. 避免把disabled用作传给“含有后代表单控件的自定义指令”的属性名。

也就是说，这个坑主要由自定义指令的命名触发。如果你在 IE11 中遇到“模型改了但表单值不动、select 点不了”的现象，优先检查模板中是否存在这类命名，而不是去改ng-model的绑定逻辑。

如何核对适配是否生效

文档没有提供专门的自动化验证命令，但每条适配都给出了 IE 中未适配时会出现的具体现象，可以据此在 IE9–11 中做核对：

• 按钮点击后行为不符合预期、实际类型是submit：检查type是否还写成type="{{...}}"；
• 进度条始终显示 0：检查value是否还写成value="{{...}}"；
• IE 10/11 控制台报错、访问nodeValue失败：检查<textarea>的placeholder是否改成了ng-attr-placeholder；
• 内联样式不生效：检查style="{{...}}"是否改成了ng-style；
• IE11 中ng-model不同步、select不可操作：按上一节检查disabled相关的自定义指令命名。

核对时建议直接在 IE9、IE10、IE11 上分别走一遍包含这些控件的页面，与项目 CI 覆盖的版本保持一致。

边界与下一步

• IE8 及以下：文档不保证任何行为，如需支持 IE8 请停留在 AngularJS 1.2，且核心特性需要自行测试。
• 本文只覆盖模板属性层面的适配；IE 兼容指南 的完整内容以仓库文档为准，插值相关的其他已知问题（如动态修改插值内容会被覆盖、表达式中嵌插值标记属于不推荐用法）见 插值指南的 Known Issues。

【免费下载链接】angular.jsAngularJS - HTML enhanced for web apps!项目地址: https://gitcode.com/gh_mirrors/an/angular.js