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

angular.module('ie.select', [])

.directive('ieSelectFix', [

    function () {

        return {

            restrict: 'A',

            require: 'select',

            link: function (scope, element, attributes) {

                var isIE = document.attachEvent;

                if (!isIE) return;

 

                var control = element[0];

                scope.$watch(attributes.ieSelectFix, function () {

                    //it should be use javascript way, not jquery way.

                    var option = document.createElement("option");

                    control.add(option, null);

                    control.remove(control.options.length - 1);

                });

            }

        }

    }

]);

　　

使用方式如下：

<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