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

时间:2012-12-29 09:36:26

标签: angularjs javascript-framework

我在自定义指令'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/

2 个答案:

答案 0 :(得分:6)

您好我已将您的样本更新为我认为您想要做的事情。

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

  • 首先,在像ng-click='updateRating({{item}});'这样的指令中 接收一个你不需要使用'{{}}'的表达式,因为它是 已经在范围内执行。

  • 其次,当您需要将兄弟姐妹添加到您的指令时,您需要在编译阶段而不是链接阶段执行此操作或仅使用ng-repeat

答案 1 :(得分:2)

我将.ng-scope { border: 1px solid red; margin: 2px}添加到@ rseidi的答案/小提琴中,我发现$ compile服务为模板中的每个项目创建了一个范围 - 即每个<div>。由于您要显示的项目很多,我认为更少的范围会更好。在尝试了很多不同的东西之后,我发现Angular似乎为每个“顶级”元素创建了一个新的范围。所以解决方案是创建一个外部div - 即确保只有一个“顶级”元素:

var mainTpl = '<div>';  // add this line
...
for(...) { }
mainTpl += '</div>';    // add this line

Fiddle

现在,只有外部div创建了一个范围,因为现在只有一个“顶级”元素,而不是每个项目一个。