1

我使用 Angular-UI 创建了一个评分系统。显示的星数来自一个名为 max 的变量。我可以使用 ng-model 在输入中显示这个变量，但是一旦我修改它，它就不会改变星星的数量。

你可以在这个Plunker中看到我的意思。

这是相关的js：

.directive('myRating', function() {
  return {
    restrict: 'E',
    template: '<div> \
         <div class="row rating" ng-controller="RatingDemoCtrl"> \
           <rating value="rate" max="max" readonly="isReadonly" state-on="\'glyphicon-star rated\'" state-off="\'glyphicon-star\'"></rating> <a class="glyphicon glyphicon-pencil" ng-show="editMode" ng-click="editStars = !editStars"></a>\
            <input ng-if="editStars" type="text" class="form-control" ng-model="max" /> \
         </div> \
      </div>',
    replace: true,
  };
});

var RatingDemoCtrl = function ($scope) {
  $scope.rate = 0;
  $scope.max = 10;
  $scope.isReadonly = false;

  $scope.hoveringOver = function(value) {
    $scope.overStar = value;
    $scope.percent = 100 * (value / $scope.max);
  };
};

工作正常，ng-model因为它每次都会显示 max 的值，但不会实时修改它。

有任何想法吗？

4

3 回答 3

2

这是完全可行的。复制 ui-bootstrap 代码并稍作修改。我入侵了内部，它似乎工作得很好。检查工作中的PLUNKER。这是我所做的更改，可以在第 2493-2559 行看到。

首先，我进入指令并将 maxRange 添加为双向绑定对象

scope: {
  value: '=',
  onHover: '&',
  onLeave: '&',
  maxRange: '=max'
},

然后我进入控制器并更改了一些东西，以便我可以观察 maxRange 值并根据它更新对象。

$scope.$watch('maxRange', function() {
  $scope.range = createRateObjects(new Array(parseInt($scope.maxRange)));
});

砍石头。如果它不符合您的需求，请不要害怕修改其他人的代码！

于 2014-03-03T04:50:29.577 回答
1

我刚刚快速查看了这个问题，似乎 AngularJS Bootstrap Rating 指令无法处理动态更新最大值。

于 2014-03-03T04:10:16.087 回答
0

我不小心发现了另一个黑客：

将您的评级指令包装在 ng-if 中似乎也有效。

<div ng-if="true">
  <rating max="myVar"></rating>
</div>

根据角度文档，ng-if 将在每次评估时重新插入 HTML，从而触发对myVar.

是的，它仍然有点 hacky，但我认为它比更改 bower_components 文件夹中的代码更漂亮，因为每次更新都会覆盖。

于 2015-03-16T12:29:14.897 回答