Wednesday, October 30, 2013

AngularJS ng-option with IE8

IE always make our life a bit challenging. especially with AngularJS ng-option, it won't refresh the options unless we trigger it by modify the options content. I guess this is the rendering issue in IE8, it try to compare the reference instead of the value. Here is the code snippet if you need it.
/**
* General-purpose Fix IE 8 issue with parent and detail controller.
* @example <select sk-ie-select="parentModel">
*
* @param sk-ie-select require a value which depend on the parent model, to trigger rendering in IE8
*/
app.directive('ieSelectFix', [
function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attributes, ngModelCtrl) {
var isIE = document.attachEvent;
if (!isIE) return;
var control = element[0];
//to fix IE8 issue with parent and detail controller, we need to depend on the parent controller
scope.$watch(attributes.ieSelectFix, function() {
//this will add and remove the options to trigger the rendering in IE8
var option = document.createElement("option");
control.add(option,null);
control.remove(control.options.length-1);
});
}
}
}
]);
view raw ie8SelectFix.js hosted with ❤ by GitHub