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

【问题标题】：Custom Angular Directive not working in IE11自定义 Angular 指令在 IE11 中不起作用
【发布时间】：2015-08-27 14:29:03
【问题描述】：

我有一个指令，可以在用户完成调查时显示他们的进度。以下是指令：

.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 上完成调查时，两个 sn-ps 代码都会显示进度条和完成百分比……不幸的是，它在 IE 10 或 11 上不起作用。

任何人都知道 Internet Explorer 可能会出现什么问题？

【问题讨论】：

请分享一个例子小提琴

标签： javascript angularjs web web-applications

【解决方案1】：

Navaneeth，对于延迟回复表示歉意。我设法解决了以下问题：

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

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

【讨论】：

感谢@Jacktheyeti 分享答案，我在 IE 11 中也遇到了同样的问题，我使用的是 <div id="{{mapId ? mapId : 'map'}}" style="height: {{height}}px"></div> 之类的模板，但它在 IE 中不起作用。我将其更改为 <div id="{{mapId ? mapId : 'map'}}" ng-style="{height: height}"></div>（注意 ng-style 而不是 style），它也可以在 IE 11 中使用。
@rubyprince ，太棒了！很高兴它有帮助！