Jquery插件在AngularJS ng-repeat中不起作用答案

【问题标题】：Jquery plugin not working inside AngularJS ng-repeatJquery插件在AngularJS ng-repeat中不起作用
【发布时间】：2014-09-20 18:56:15
【问题描述】：

我正在尝试在 AngularJS 的 ng-repeat 指令中使用 Jquery 插件（星级插件 - link），但我不知道为什么它不起作用。如果我在 Angular 的范围之外尝试，那么它会完美地完成它的工作。

<div ng-controller="MyController">
    <div ng-repeat="datum in data">
        <span>Name : {{datum.name}}</span><br/>
        <span>Age : {{datum.age}}</span><br/>
        <input id="rater" class="rating" value={{datum.rate}} min=0 max=5 step=1><!--Third party rating plugin-->
    </div>
</div>

html 输入被解析为星级，其值通过 ajax 请求从后端获取。我猜罪魁祸首似乎是时机，Jquery 在 Angular 之前完成了它的任务，那么还有其他方法可以完成这个任务吗？提前致谢。

【问题讨论】：

为这个 jquery 插件创建一个指令（或者搜索它是否已经存在）
ng-repeat 创建的每个输入标签都应该有不同的 id。您可以为 StarRating 插件创建一个额外的指令。在指令中，您可以直接访问 JQuery 元素而无需使用 id。 stackoverflow.com/questions/16935095/…

标签： javascript jquery angularjs rest angularjs-ng-repeat

【解决方案1】：

您可以使用http://angular-ui.github.io/bootstrap 并查找评级指令，它是一个AngularJS <rating> 指令。

Angular 提示：在使用 jQuery 插件之前始终搜索 angular js 指令

【讨论】：

感谢 Siraj - 我使用了指令。问题解决了！

【解决方案2】：

我创建了一个自定义指令并链接了我的属性。现在它工作得很棒。请在下面找到代码 sn-p。

我的指令：

renapp.directive('srater',function(){
 return {
 restrict : 'AE',
 link : function(scope, elem, attr){
   $(elem).rating('update', attr.value);
  }
 } 
});

HTML：

<srater value={{datum.rate}} data-show-clear="false" readonly="true"></srater>

感谢大家的支持。

【讨论】：

【解决方案3】：

最简单的方法可能是在窗口加载后使用jquery setimeout() 函数。

这可能不是一个好方法，但它对我来说很容易并且效果很好。

代码如下所示：

jQuery(window).load(function() {        
    setTimeout(function(){
        jQuery("#rater").rating();
    }, 10); /****10 is dealy in milliseconds**/
});

如果你使用的是 http 服务，那么你也可以使用 angularjs $timeout 服务

类似的东西

   $scope.show_ratings = function(id) {
        $http({
            method : "GET",
            url : SITE_URL+"angular_http/fetch_ratings.php",
            params: {subcateid: id}
        }).then(function mySucces(response) {
            $scope.fetch_ratings = response.data.records;
        }, function myError(response) {
            $scope.myerror = response.statusText;
        });
        $timeout(function () {
            jQuery("#rater").rating();
        }, 500);
    },

我希望它对所有人都有效。

【讨论】：