在自定义指令中绑定ng指令

Question

我有以下代码与自定义指令'my-repeater':

<div ng-controller="AngularCtrl">
  <div my-repeater='{{items}}'>Click here</div>
</div>?

这是我的自定义指令:

myApp.directive('myRepeater', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var myTemplate = "<div ng-click='updateRating({{item}});' ng-class='getRatingClass({{rating}});'>{{rating}}</div>";
            var items = scope.items;
            console.log('length: ' + items.length);
            for (var i = 0; i < items.length; i++) {
                var child = scope.$new(true);
                console.log(items[i].ratings);
                child.item = items[i];
                child.rating = items[i].ratings;                    
                var text = $compile(myTemplate)(child);
                element.append(text);
            }
   }
};

});

在我的自定义指令中没有正确地发生ng-click和ng-class绑定.任何人都可以帮我解决我在这里做错了什么吗？

这是JS小提琴. http://jsfiddle.net/JSWorld/4Yrth/5/

Answer 1

嗨,我已将您的样本更新为我认为您想要做的事情.

http://jsfiddle.net/46Get/2/

• 首先,在ng-click='updateRating({{item}});'接收表达式的指令中,您不需要使用"{{}}",因为它已在范围内执行.

• 其次,当您需要在指令中添加兄弟节点时,您需要在编译阶段而不是链接阶段执行此操作,或者只需使用ng-repeat