jQuery Raty and AngularJS

Question

I'm trying to use jQuery Raty plugin with AngularJS. No success yet.

What I need is something like:

<ul>
    <li ng-repeat="obj in collection">
        <p>{{obj.rating}}</p>
        <div id="star{{$index}}"></div>

        <p>{{obj.someText}}</p>

        <script>$("#star{{$index}}").raty();</script>
    </li>
</ul>

But the script seems not to be executed and it doesn't even appear in the webpage. Besides it looks also like a very ugly approach, but I don't have more ideas.

How can I do this? Or do I need a different plugin / functionality for the stars?

EpokK · Accepted Answer · 2013-08-13T14:00:26.560

9

If I had to do this, I will develop an AngularJS directive, like this:

JS

yourApp.directive("raty", function() {
    return {
        restrict: 'AE',
        link: function(scope, elem, attrs) {
            $(elem).raty({score: attrs.score, number: attrs.number});
        }
    }
}

HTML

<raty id="star{{$index}}" score="1" number="5"></raty>

enter image description here

If you want add some parameters on Raty, you can edit simply my directive ;)

edited Aug 13 '13 at 14:00

answered Aug 13 '13 at 13:34

EpokK

38,062
9
61
69

Yes if you add `restrict: 'AEC',` in my directive :) – EpokK Aug 13 '13 at 14:01
Hm... I'm unsure about using custom elements. Custom attributes feels a bit more acceptable. See for example: http://stackoverflow.com/questions/17503102/consequences-of-custom-html-tags-in-angularjs-directives I think I'll stick with the other answer, thanks anyways. – User Aug 13 '13 at 14:07
Nevermind - this is the best approach. I didn't think about the attributes. – User Aug 13 '13 at 14:26
There's nothing wrong in using custom elements, except perhaps for IE issues. I disagree with the other question's answer that custom elements don't have semantic value. On the contrary, IMO they are way more expressive than using a div with a custom attribute – Michael Benford Aug 13 '13 at 14:31
Well, actually, this didn't work. `attrs.score` is undefined. – User Aug 13 '13 at 15:08
Correction: It works with this code, but in my question I use an expression for the rating value: {{obj.rating}}. It doesn't work if I replace the number with it. – User Aug 13 '13 at 15:15
Ok, `{{obj.rating}}` works with Angular 1.1.5 (not stable). With currently stable version 1.0.7 it doesn't work. – User Aug 13 '13 at 19:16

score 4 · Answer 2 · answered Aug 13 '13 at 13:24

4

You should be able to create a directive:

<div id="star{{$index}}", ng-stars>

Angular

.directive("ngStars", function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            $(elem).raty();
        }
    }
}

Little new to Angular though, so, this may be the wrong thinking.

answered Aug 13 '13 at 13:24

tymeJV

103,943
14
161
157

Thank you, this works! Was missing the keyword "directive" - now I also could find this page: http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/ where there's even an example using rating stars. – User Aug 13 '13 at 13:52
Somebody is downvoting this thread with no reason. I have +1 on your answer but it's still on 0. My question and I think the other answer (it had 4 before) also got a -1. Writing it here because I don't know what else to do about it. – User Aug 13 '13 at 14:12
1

@Ixx -- It happens, I would love to know the reason, especially if it's actually constructive. Oh well though...glad to help :D. +1 back to the question. – tymeJV Aug 13 '13 at 14:15

jQuery Raty and AngularJS

2 Answers2

Linked