angularjs ng-option ie issue解决方案

最近遇见angularjs 在IE上当使用ng-options作为select的选项数据源，并且被套在ng-switch（ng-transclude）之类的，当angular上得ng-options数据源model改变后，在IE上并不渲染。

在一阵的测试和阅读相关文档后最后确认为：因为ng-switch（ng-transclude）是为了使其scope为原来的父scope，在父scope上生成了DOM后才克隆(cloneNode)到指定的指令位置。然而IE在对于select克隆的节点，不会主动去触发重绘，所以才有了上面的issue。

问题确定了，那我们所需要做的就是手动的去触发让IE对Select重绘，尝试了很多办法后最终确认有效的是：首先在options上用原生js去添加一个option，在马上移除掉这个option，所以解决方案如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<code>angular.module(</code><code>'ie.select'</code><code>, [])</code>

<code>.directive(</code><code>'ieSelectFix'</code><code>, [</code>

<code>    </code><code>function</code> <code>() {</code>

<code>        </code><code>return</code> <code>{</code>

<code>            </code><code>restrict: </code><code>'A'</code><code>,</code>

<code>            </code><code>require: </code><code>'select'</code><code>,</code>

<code>            </code><code>link: </code><code>function</code> <code>(scope, element, attributes) {</code>

<code>                </code><code>var</code> <code>isIE = document.attachEvent;</code>

<code>                </code><code>if</code> <code>(!isIE) </code><code>return</code><code>;</code>

<code> </code> 

<code>                </code><code>var</code> <code>control = element[0];</code>

<code>                </code><code>scope.$watch(attributes.ieSelectFix, </code><code>function</code> <code>() {</code>

<code>                    </code><code>//it should be use javascript way, not jquery way.</code>

<code>                    </code><code>var</code> <code>option = document.createElement(</code><code>"option"</code><code>);</code>

<code>                    </code><code>control.add(option, </code><code>null</code><code>);</code>

<code>                    </code><code>control.remove(control.options.length - 1);</code>

<code>                </code><code>});</code>

<code>            </code><code>}</code>

<code>        </code><code>}</code>

<code>    </code><code>}</code>

<code>]);</code>

　　

使用方式如下：

<code>&lt;</code><code>select</code> <code>ie-select-fix="options" ng-model="demos" class="form-control"</code>

<code>        </code><code>ng-options="currOption.value as currOption.text for currOption in options"&gt;</code>

<code>    </code><code>&lt;</code><code>option</code> <code>value="" default&gt;Select&lt;/</code><code>option</code><code>&gt;</code>

<code>&lt;/</code><code>select</code><code>&gt;</code>

我也在我的github专门创建了一个针对angularjs在IE上issue的项目，收录了这个指令，在后续也会加入我所遇见的angularjs关于ie的issue，也希望大家帮助完善这个项目，让我们的angularjs程序在IE工作的更美好，让我们这些辛苦的程序猿也少一点加班时间，多一点陪家人，泡咖啡的时间。哈哈。

本文转自破狼博客园博客，原文链接：http://www.cnblogs.com/whitewolf/p/3464053.html，如需转载请自行联系原作者