0

I've written an angular controller that crashes Internet Explorer 11 consistently, but works as expected in Chrome, Firefox and Opera.

There's nothing too complicated here, it's displaying values from an array in a table row, using a checkbox to switch between displaying all the values, or a subset of the array.

Click the box twice to trigger the crash

<div ng-app="monthsApp">
  <div ng-controller="MonthsCtrl as monthsCtrl">
    <table style="border-collapse: collapse;">
      <colgroup>
        <col span="{{monthsCtrl.getSpan()}}" />
      </colgroup>
      <thead>
        <tr>
          <th>
            <div>
              switch between six and twelve months:
              <input id="agings-open-balances-matrix-state" ng-model="monthsCtrl.sixOrTwelve" type="checkbox" ng-click="monthsCtrl.updateDisplay()">
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Months</td>
          <td ng-repeat="month in monthsCtrl.monthsToDisplay">{{month}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<script>
  var monthsApp = angular.module('monthsApp', []);
  monthsApp.controller('MonthsCtrl', function() {
    var vm = this;
    var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    vm.sixOrTwelve = false; //false = display six month; true = display 12 months
    vm.updateDisplay = function() {
      vm.monthsToDisplay = [];
      if (vm.sixOrTwelve) {
        vm.monthsToDisplay = months;
      } else {
        vm.monthsToDisplay = months.slice(6);
      }
    }
    vm.getSpan = function() {
      return (vm.sixOrTwelve) ? 13 : 7;
    }
    vm.updateDisplay();
  });
</script>

I've created a plunkr to demonstrate this here: http://plnkr.co/RTIhnU

Removing the "colgroup" tag, or the "border-collapse" value in the table style attribute to resolve the issue.

Is this a known issue, and if so is there a workaround or fix?

3
  • just to add I pretty much blundered into this, I didn't set out to write a controller that would crash IE! Commented Mar 3, 2017 at 16:13
  • I can confirm the crash. It seems to be when you uncheck the checkbox again
    – mvermand
    Commented Mar 3, 2017 at 16:22
  • thanks mvermand I've added the instructions to trigger the crash Commented Mar 3, 2017 at 16:36

1 Answer 1

2

Try this one.

The problem was in this line:

<col span="{{monthsCtrl.getSpan()}}" />

Apparently, colspan does not work well with two-way binding in IE11. After replacing function getSpan with a variable spanLength and using one-way binding, it does not crash anymore.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.