IE 8 下 angular 動態生成的 select 的兼容指令

咱們用的是 angular 1.2.5,如下代碼也只用此版本測試過。

angular 渲 select 有不少坑，例如：官方推薦是用 ng-options，可是這樣渲出來的下拉菜單在某些版本的 chrome 上是不可用的，因此爲了兼容，咱們捨棄了 ng-options。那麼只剩下 ng-repeat 來渲下拉菜單，這樣在 ie 8 下也是有坑的，對於動態生成的下拉菜單，ie 8 老是沒法渲出各個 options，如圖：

這種狀況下就須要使用指令作點兼容，以下

<!-- 寫出此等代碼，只爲方便，還望海涵 -->
<div class="pure-g mt" ng-repeat="courseTeacher in ctrl.newCourseTeacherList track by $index">
    <select ng-model="ctrl.newCourseTeacherList[$index]" ie-select-fix="ctrl.teacherList">
        <option ng-repeat="teacher in ctrl.teacherList track by teacher.id" value="{{teacher.id}}" ng-bind="teacher.name"></option>
    </select>
</div>

// ieSelectFix directive
app.directive('ieSelectFix', [
    '$document',

    function ($document) {

        return {
            restrict: 'A',
            require : 'ngModel',
            link    : function (scope, element, attributes) {
                var isIE = $document[0] && $document[0].attachEvent;
                if (!isIE) return;

                var $ele = element[0];
                //to fix IE8 issue with parent and detail controller, we need to depend on the parent controller
                scope.$watch(attributes.ieSelectFix, function () {
                    // setTimeout is needed starting from angular 1.3+
                    setTimeout(function () {
                        //this will add and remove the options to trigger the rendering in IE8
                        var oOption = new Option();
                        $ele.add(oOption);
                        $ele.remove($ele.options.children.length - 1);
                    }, 0);
                });
            }
        }
    }
]);

</script>