I have been unable to render a list in IE8 specifically. All other browsers execute the following code as intended, however, IE8 completely ignores the function completely. Any tips, suggestions and/or solutions are greatly appreciated, Cheers.
alert("workflow.js"+ " this call goes off in IE8");
$scope.makeAndGetList = function(list) {
//todo: lj: IE8 doesn't make it here
//alert("workflow.js"+ " no IE");
var parts = list.split('.'),
current = $scope.workflow;
_.each(parts, function(part, index) {
if (current[part] == undefined) {
current[part] = (index == parts.length - 1) ? [] : {};
}
current = current[part];
//todo: lj: IE8 doesn't make it in here
// app.appAlert("workflow.js"+ " line 19");
});
alert("workflow.js - this functions correctly executes in IE8");
Here is the HTML as requested:
<sa-list list="makeAndGetList('areas_of_need')" edit="true" model="areas_of_need" array-mode="true">
<sa-lookup style="multiselect" override="false" list="areas_of_need.terms" model="areas_of_need" model-key="need" label="{{locale.iprc.areas_of_strengths_and_needs.needs}}"></sa-lookup>
</sa-list>
Not sure if this is your issue (can you post a jsfiddle with your directives?), but here's a possibility. IE 8 can handle angular directives only as attributes (not elements). Luckily, it is easy to change an angular element into an attribute. E.g., for a directive "saList", where the html says <sa-list>
, rewrite the html as <div sa-list>
(and make sure your directive has the property restrict: 'A'
, not restrict: 'E'
). See an example (that works in IE 8) here: http://jsfiddle.net/dannystaten/hQn9F/
Take a look at ieshiv I wrote it for angular-ui project. Gives you an easy way to incorporate.
Also try upgrading to 0.2.0 version of Angular UI Bootstrap. I was facing similar issues for "Alert" control. After upgrading it to 0.2.0 and using it as attribute resolved my issue