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?

Answer 1

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>

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

Answer 2

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.