Javascript 通过append方法调用angular指令

我试图调用一个带有html文本的angular指令，就像这样附加在控制器中

var loadReviews=function(){
var theDiv=$("#rlist")
   for(var i=0; i<vm.reviewlistByUpvote.length; i++){
       var review=vm.reviewlistByUpvote[i];
       var html='<a star-directive ng-model="review.overall" data-size="xs" data-disabled="true"> </a>';
       theDiv.append(html)
 };
};

---

但是，该指令不会编译。如果我在html中加载star指令，它可以正常工作，但是通过这种方法，没有加载任何内容。我已经研究了$compile，但它没有解决问题，但我可能没有正确地应用它。

我会避免手动将指令添加到html中，我建议让angular负责添加html内容

现在有些情况下，您需要附加html内容（如在modals中），在这种情况下，您需要在附加html之前使用$compile服务编译html，然后分配作用域（可以是新的或相同的）

下面是Ben Lesh关于如何做到这一点的一个很酷的例子：

---

不确定为什么在指令中注释掉了

templateUrl

。这将是一种更合适的方法来实现这一点并摆脱jQueryDOM操作。也不确定您为什么要在

标签上使用

ng型号

。没有要设置的视图值，即表单控制创建一个包含插件资源的简单演示我首先尝试使用templateUrl，但我不确定如何传入评论列表，并让它为每次评论生成内容。有没有办法将参数传递到模板url中？没有……您可以通过指令分配到的标记上的属性将数据传递给指令

angular.module('App')
.directive('starDirective', function() {
return {
  restrict: 'A',
  // templateUrl: 'views/star.html',
  link: function(scope, element, attrs, ngModel) {
        $(element).rating(scope.$eval(attrs.starRating));

              // get value from ng-model
        ngModel.$render = function() {
            $(element).rating('update', ngModel.$viewValue || '');
        }



          $(element).on('rating.change', function(event, value, caption) {
            ngModel.$setViewValue(value);
        });
         }


   };
 });