Jquery插件在AngularJS ng repeat中不工作

Jquery plugin not working inside AngularJS ng-repeat

本文关键字：工作 repeat ng 插件 AngularJS Jquery      更新时间：2023-09-26

我正试图在AngularJS的ng repeat指令中使用Jquery插件（星级评定插件-链接），但我不知道为什么它不起作用。如果我在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之前完成了任务，所以有其他方法可以完成这项任务吗？提前感谢。

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

Angular提示：在返回到jQuery插件

之前，始终搜索Angular js指令我创建了一个自定义指令并链接了我的属性。现在它的工作非常棒。请在下面找到代码片段。

我的指令：

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>

谢谢大家的支持。

最简单的方法可能是在窗口加载后使用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);
    },

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

相关文章：