javascript - 通过追加方法调用 Angular Directive(指令)

Question

我正在尝试使用我在 Controller 中附加的 html 文本调用 Angular Directive(指令)，如下所示，

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)
 };
};

我的指令如下所示，

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);
        });
         }


   };
 });

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

Answer 1

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

现在有些情况下，您需要附加 html 内容(例如在模态中)，在这种情况下，您需要在附加 html 之前使用 $compile 服务编译 html，然后分配一个范围(可以是一个新的范围)或同一个)

以下是 Ben Lesh 提供的一个很酷的示例，说明如何做到这一点: http://www.benlesh.com/2013/08/angular-compile-how-it-works-how-to-use.html