0

カスタムディレクティブ「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/

4

2 に答える 2

6

こんにちは私はあなたのサンプルをあなたがやりたいと思うものに更新しました。

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

  • まず、ng-click='updateRating({{item}});'式を受け取るそのようなディレクティブでは、スコープ内ですでに実行されているため、「{{}}」を使用する必要はありません。

  • 次に、ディレクティブに兄弟を追加する必要がある場合は、リンクフェーズではなくコンパイルフェーズで追加するか、単にng-repeatを使用する必要があります。

于 2012-12-29T11:27:53.090 に答える
2

.ng-scope { border: 1px solid red; margin: 2px}@rseidi の回答/フィドルに追加したところ、テンプレート内の各項目 (つまり、各<div>. 表示するアイテムが非常に多いため、スコープは少ない方がはるかに優れていると思います。さまざまなことを試した後、Angular が「トップレベル」要素ごとに新しいスコープを作成しているように見えることを発見しました。したがって、解決策は外側の div を作成することです。つまり、「最上位」要素が 1 つだけであることを確認します。

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

フィドル

これで、アイテムごとに 1 つではなく、「最上位」要素が 1 つしかないため、外側の div のみがスコープを作成します。

于 2012-12-29T19:18:30.630 に答える