Question

我正在使用以下参考来生成平均评级值的星星。此代码在chrome中工作正常，并根据值填充星星。但是在IE中它显示了所有的星星，无论其价值如何。我发现的问题是设置宽度的动态值是不是在IE.can中有所帮助？enter code here code 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

It's because IE is being difficult.

Before Angular has compiled the bindings, IE will see this attribute:

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

IE finds this invalid and replaces it with:

style=""

A simple workaround is to use ng-attr-style instead:

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

Demo: http://codepen.io/anon/pen/ZbVGRP

使用角度指令的平均星级

1 个答案: