最近遇見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