自定义 Angular 指令在 IE11 中不起作用

Question

我有一个指令显示用户完成调查的进度。下面是指令：

.directive('progressBar', [function () {
  return {
    templateUrl: 'survey/survey.progressBar.tpl.html',
    replace: true,
    restrict: 'E',
    scope: {
      currentPage: '=',
      totalPages: '='
    },
    link: function ($scope, iElement, iAttrs) {
      $scope.getProgress = function() {
        var toReturn = Math.ceil(($scope.currentPage/$scope.totalPages)*100);
        if (isNaN(toReturn)) {
          return 0;
        }
        return toReturn;
      };
    }
  };
}]);

下面是调用这个指令的表达式：

<div class="progress-bar-container">
  <div class="progress-bar" style="width:{{ getProgress() }}%;" ng-style="width:{{ getProgress() }}%;">
    <div class="tooltip arrow-up">
      <span>{{ getProgress() }}% <span translate="SURVEY.COMPLETE"></span></span>
    </div>
  </div>
</div>

当用户在 Firefox、Safari 和 Chrome 上完成调查时，这两个代码片段都会显示进度条和完成百分比...不幸的是，它在 IE 10 或 11 上不起作用。

有人知道 Internet Explorer 上可能会出现什么问题吗？

Answer 1

Navaneeth，对于延迟回复，我们深表歉意。我设法通过以下方式解决了问题：

<div class="progress-bar" ng-style="{width: getProgress() + '%'}">

IE11 据说不渲染内联样式标签，我只需要使用 Angular 的 "ng-style" 表达式就可以了。

自定义 Angular 指令在 IE11 中不起作用

Custom Angular Directive not working in IE11

javascript

web-applications

web

angularjs