崩溃Internet Explorer 11的角度控制器

时间:2017-03-03 16:13:03

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

我已经编写了一个角度控制器,可以持续崩溃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>

我在这里创建了一个用来证明这一点的傻瓜:http://plnkr.co/RTIhnU

删除&#34; colgroup&#34;标签,或者&#34; border-collapse&#34;表样式属性中的值可以解决问题。

这是一个已知问题,如果有,是否有解决方法或修复方法?

1 个答案:

答案 0 :(得分:2)

尝试this一个。

问题在于这一行:

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

显然,colspan在IE11中与双向绑定不兼容。使用变量getSpan替换函数spanLength并使用单向绑定后,它不会再崩溃。