jQuery Raty 和 AngularJS

Question

我正在尝试在AngularJS中使用jQuery Raty插件。目前还没有成功。

我需要的是类似于：

<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>

但是脚本似乎没有执行，甚至在网页中也没有显示出来。此外，它看起来也是一种非常丑陋的方法，但我没有更多的想法。

我该怎么做？或者我需要不同的插件/功能来实现星级评分吗？

- User

Answer 1

如果我要做这件事，我会开发一个像这样的AngularJS指令：

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>

如果您想在Raty上添加一些参数，您只需要简单地编辑我的指令即可；）

- EpokK

---

如果您在我的指令中添加 restrict: 'AEC',，是的 :) - EpokK

嗯...我不确定是否使用自定义元素。自定义属性感觉更可接受一些。例如：https://dev59.com/RWMm5IYBdhLWcg3wlvwK 我想我还是会坚持选择其他答案，无论如何还是谢谢。 - User

没关系 - 这是最好的方法。我没有考虑到属性。 - User

使用自定义元素并没有什么问题，除了可能会在IE上出现问题。我不同意其他问题的答案，认为自定义元素没有语义价值。相反，我认为它们比使用带有自定义属性的div更具表现力。 - Michael Benford

实际上，这个并没有起作用。attrs.score 是未定义的。 - User

Answer 2

您应该能够创建一个指令：

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

Angular

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

虽然我对Angular还不是很熟悉，所以可能想法有误。

- tymeJV

---

谢谢，这个可行！我漏掉了“指令”这个关键词 - 现在我还找到了这个页面：http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/，甚至有一个使用评分星级的示例。 - User

有人毫无理由地对这个帖子进行了负面评价。我已经为你的答案点赞，但它仍然是0分。我的问题以及我认为其他答案（之前有4个赞）也遭到了-1的评价。在这里写下来，因为我不知道还能做什么。 - User

@Ixx -- 这种事情时有发生，我很想知道原因，尤其是如果它实际上是有建设性的。无论如何...很高兴能帮忙:D。回到问题上+1。 - tymeJV