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，所以解决方案如下：

javascript" style="font-size:1em;">

 
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">angular.module(
          javascript string" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:#0000FF;">'ie.select'
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">, []) 
         
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">.directive(
          javascript string" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:#0000FF;">'ieSelectFix'
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">, [ 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">    
          javascript keyword" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,255);">function 
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">() { 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">        
          javascript keyword" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,255);">return 
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">{ 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">            
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">restrict: 
          javascript string" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:#0000FF;">'A'
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">, 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">            
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">require: 
          javascript string" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:#0000FF;">'select'
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">, 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">            
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">link: 
          javascript keyword" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,255);">function 
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">(scope, element, attributes) { 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">                
          javascript keyword" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,255);">var 
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">isIE = document.attachEvent; 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">                
          javascript keyword" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,255);">if 
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">(!isIE) 
          javascript keyword" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,255);">return
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">; 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">  
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">                
          javascript keyword" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,255);">var 
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">control = element[0]; 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">                
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">scope.$watch(attributes.ieSelectFix, 
          javascript keyword" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,255);">function 
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">() { 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">                    
          javascript comments" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,130,0);">//it should be use javascript way, not jquery way. 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">                    
          javascript keyword" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,255);">var 
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">option = document.createElement(
          javascript string" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:#0000FF;">"option"
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">); 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">                    
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">control.add(option, 
          javascript keyword" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,255);">null
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">); 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">                    
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">control.remove(control.options.length - 1); 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">                
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">}); 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">            
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">} 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">        
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">} 
         
          javascript spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;">    
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">} 
         
          javascript plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;background:none;border:0px;line-height:1.8em;vertical-align:baseline;color:rgb(0,0,0);">]);

使用方式如下：

 
          <
          select 
          ie-select-fix="options" ng-model="demos" class="form-control" 
         
          ng-options="currOption.value as currOption.text for currOption in options"> 
         
          <
          option 
          value="" default>Select</
          option
          > 
         
          </
          select
          >

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

github项目地址：https://github.com/greengerong/angular-ie-enhancer

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