Плагин jquery raty устанавливает значение скорости через angularjs

Я пытаюсь использовать плагин jquery raty для звездного рейтинга с angularjs. Я создал для него пользовательскую директиву следующим образом:

app.directive("ngStars", function() {
        return {
            restrict: 'A',
            link: function(scope, elem, attrs) {
                $(elem).raty({ 
                   'path': base_url+'images',
                    score:  attrs.score,
                    readOnly: true,
                    hints: ['سىء جدا', 'سىء', 'عادى', 'جديد', 'ممتاز'],
                });
            }
        }
    });

и мой html следующим образом

<div ng-repeat="place in places">
    <div ng-stars class="star" score={{place.rate}}></div>
</div>

плагин работает нормально, если я предварительно определил значение атрибута score как score="5", но мне нужно установить значение оценки через angularjs score="{{place.rate}}", но это не работает.

Как я могу решить эту проблему?


javascript angularjs raty
person Mohamed Nagy    schedule 16.10.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

вам нужно связать директиву шаблона со значением области действия, которое должно быть предоставлено

я создал небольшую демонстрацию, вы можете использовать опцию $scope.rating в контроллере, чтобы изменить рейтинг здесь

РАБОЧАЯ ДЕМО

template: '<ul class="rating">' +
              '<li ng-repeat="star in stars" ng-class="star">' +
                '\u2605' +
              '</li>' +
            '</ul>',
  scope: {
    ratingValue: '=',
    max: '='
  },
  link: function (scope, elem, attrs) {
    scope.stars = [];
    for (var i = 0; i < scope.max; i++) {
      scope.stars.push({filled: i < scope.ratingValue});
    }
  }

Существует замечательный учебник здесь для получения дополнительных объяснений.

person Vinod Louis    schedule 16.10.2013
comment
Значения скорости загружаются динамически из объекта Places, который загружается функцией $http.post. и я использую этот плагин wbotelhos.com/raty, который динамически генерирует html для меня. - person Mohamed Nagy; 17.10.2013

arrow_upward
0
arrow_downward

UI Bootstrap имеет отличные функции, включая функцию оценки.

директива:

<rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>

контроллер:

angular.module('ui.bootstrap.demo').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'}
  ];
});
person Mohamed Nagy    schedule 08.05.2015