使用 angular 指令的平均星级

Question

我正在使用以下参考生成平均评级值的星星。此代码在 chrome 中运行良好，并根据值填充星星。但在 IE 中，它显示所有的星星都被填充，而不考虑价值。我发现的问题是设置宽度的动态值没有接受 IE.can 一些帮助？enter code herecode pen link

代码：

html:<div ng-app="app" ng-controller="RatingCtrl" class="container">
  <h1>Angular Star Rating Directive</h1>
  Average Rating: {{ averageRating }}
  <div class="average">
    <average-star-rating ng-model="averageRating" max="5"><average-star-rating>    
  </div>

</div>

css:

@import "compass/css3";

.rating {
  margin: 0;
  padding: 0;
  display: inline-block;

  li {
    padding: 1px;
    color: #ddd;
    font-size: 20px;
    text-shadow: .05em .05em #aaa;
    list-style-type: none;
    display: inline-block;
    cursor: pointer;
    &.filled {
      color: #fd0; //#21568b
    }
  }
  &.readonly li.filled {
    color: #666;
  }
}

.average-rating-container {
  position:relative;
  height:31px;
  width:103px;
  overflow:hidden;

  .background,
  .foreground {
    position: absolute;
    top:0;
    left:0;
    overflow:hidden;
    white-space: nowrap;
  }
}

js:

angular.module("app", [])
.controller("RatingCtrl", function($scope) {

  $scope.averageRating = 3.5;


})

.directive("averageStarRating", function() {
  return {
    restrict : "EA",
    template : "<div class='average-rating-container'>" +
               "  <ul class='rating background' class='readonly'>" +
               "    <li ng-repeat='star in stars' class='star'>" +
               "      <i class='fa fa-star'></i>" + //&#9733
               "    </li>" +
               "  </ul>" +
               "  <ul class='rating foreground' class='readonly' style='width:{{filledInStarsContainerWidth}}%'>" +
               "    <li ng-repeat='star in stars' class='star filled'>" +
               "      <i class='fa fa-star'></i>" + //&#9733
               "    </li>" +
               "  </ul>" +
               "</div>",
    scope : {
      averageRatingValue : "=ngModel",
      max : "=?", //optional: default is 5
    },
    link : function(scope, elem, attrs) {
      if (scope.max == undefined) { scope.max = 5; }
      function updateStars() {
        scope.stars = [];
        for (var i = 0; i < scope.max; i++) {
          scope.stars.push({});
        }
        var starContainerMaxWidth = 100; //%
        scope.filledInStarsContainerWidth = scope.averageRatingValue / scope.max * starContainerMaxWidth;
      };
      scope.$watch("averageRatingValue", function(oldVal, newVal) {
        if (newVal) { updateStars(); }
      });
    }
  };
});

Answer 1

因为IE难用

在 Angular 编译绑定之前，IE 将看到此属性：

style="width:{{filledInStarsContainerWidth}}%"

IE 发现此无效并将其替换为：

style=""

一个简单的解决方法是使用 ng-attr-style 代替：

ng-attr-style="width:{{filledInStarsContainerWidth}}%"

演示： http://codepen.io/anon/pen/ZbVGRP

使用 angular 指令的平均星级

Average star rating using angular directive

angularjs

average

rating