【问题标题】:jQuery Raty and AngularJSjQuery Raty 和 AngularJS
【发布时间】:2013-08-13 13:15:37
【问题描述】:

我正在尝试将 jQuery Raty plugin 与 AngularJS 一起使用。还没有成功。

我需要的是这样的:

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

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

我该怎么做?还是我需要为星星添加不同的插件/功能?

【问题讨论】:

    标签: jquery angularjs raty


    【解决方案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 上添加一些参数,你可以简单地编辑我的指令;)

    【讨论】:

    • 是的,如果你在我的指令中添加restrict: 'AEC', :)
    • 嗯...我不确定是否使用自定义元素。自定义属性感觉更容易接受。例如:stackoverflow.com/questions/17503102/… 我想我会坚持另一个答案,无论如何谢谢。
    • 没关系 - 这是最好的方法。我没有考虑属性。
    • 使用自定义元素没有任何问题,除了 IE 问题。我不同意另一个问题的答案,即自定义元素没有语义价值。相反,IMO 它们比使用具有自定义属性的 div 更具表现力
    • 嗯,实际上,这不起作用。 attrs.score 未定义。
    【解决方案2】:

    你应该能够创建一个指令:

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

    角度

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

    虽然对 Angular 来说并不陌生,所以这可能是错误的想法。

    【讨论】:

    • 谢谢,这行得通!缺少关键字“指令” - 现在我也可以找到这个页面:befundoo.com/university/tutorials/angularjs-directives-tutorial 甚至还有一个使用评级星的示例。
    • 有人无缘无故地否决了这个帖子。我对你的答案有 +1,但它仍然是 0。我的问题和我认为另一个答案(之前有 4 个)也得到了 -1。写在这里是因为我不知道还能做什么。
    • @Ixx -- 碰巧,我很想知道原因,特别是如果它实际上是建设性的。哦,不过……很高兴能提供帮助:D。 +1 回到问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-16
    • 2017-01-13
    • 1970-01-01
    • 2023-03-02
    • 2015-10-28
    相关资源
    最近更新 更多