角度自举评级

Question

我正在从Angular Bootstrap 文档中复制示例

HTML(Jade)是:

rating(ng-model="rate" max="max" on-hover="hoveringOver(value)" on-leave="overStar = null") {{rate}}
   span.label(ng-class="{'label-warning': percent<30, 'label-info':percent>=30 && percent<70, 'label-success': percent>=70}", ng-show="overStar && !isReadonly") 
    {{percent}}%
   pre(style="margin:15px 0;")
    | Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}

和javascript:

app.controller('RatingDemoCtrl' , function ($scope) {
  $scope.rate = 7;
  $scope.max = 10;
  $scope.isReadonly = false;

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

  $scope.ratingStates = [
    {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
    {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
    {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
    {stateOn: 'glyphicon-heart'},
    {stateOff: 'glyphicon-off'}
  ];
});

当我点击元素时,我收到以下错误:

Error: [$compile:nonassign] Expression 'undefined' used with directive 'rating' is non-assignable!

我理解的是与数据绑定有关.这是ui.bootstrap.rating控件中的错误还是我做了明显不正确的事情？

Answer 1

使用值而不是ng-model:

<rating value="rate" max="max"></rating>