使 Internet Explorer 11 崩溃的 Angular 控制器答案

【问题标题】：Angular controller that crashes Internet Explorer 11使 Internet Explorer 11 崩溃的 Angular 控制器
【发布时间】：2017-07-23 20:13:49
【问题描述】：

我编写了一个 Angular 控制器，它始终使 Internet Explorer 11 崩溃，但在 Chrome、Firefox 和 Opera 中正常运行。

这里没有什么太复杂的地方，它在表格行中显示数组中的值，使用复选框在显示所有值或数组子集之间切换。

点击框两次触发崩溃

<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>

我在这里创建了一个 plunkr 来演示这一点：http://plnkr.co/RTIhnU

删除表格样式属性中的“colgroup”标签或“border-collapse”值来解决问题。

这是一个已知问题吗？如果是，是否有解决方法或修复方法？

【问题讨论】：

只是补充一下，我在这方面犯了很大的错误，我并没有打算编写一个会导致 IE 崩溃的控制器！
我可以确认崩溃。似乎是当您再次取消选中该复选框时
感谢 mvermand 我已经添加了触发崩溃的说明

标签： javascript angularjs internet-explorer internet-explorer-11

【解决方案1】：

试试this 一个。

问题出在这一行：

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

显然，colspan 在 IE11 中不能很好地用于双向绑定。将函数getSpan替换为变量spanLength并使用单向绑定后，不再崩溃。

【讨论】：