ng-repeat変数をカスタム角度指示にバインドする方法は？

Question

Angular（v1.3）では、変数をng-repeatからカスタムディレクティブにバインドする方法はありますか？

すべての例は、代わりに$ scope変数にバインドされているようです。

<li ng-repeat="product in products"> 
    <product item="product" /> 
</li> 

ディレクティブは次のように作成されます：例えば、我々はこの効果に何かを行うことができますどのように製品のリストおよび製品というカスタムディレクティブ、与えられた

(function() { 
    'use strict'; 

    var productDirective = function() { 
     return { 
       restrict: 'E', 
       scope: {item: '='}, 
       templateUrl: '/views/product.html',     
      }; 
    }; 

    angular 
     .module('myApp') 
     .directive('product', productDirective); 

})(); 

をそして、それは非常に単純なテンプレートを持っています：

<p>{{item.name}} {{item.price}}</p> 

スコープ： '='は$ scopeにのみバインドされ、ng-repeatにはバインドされないため、これは失敗します。

私はそれが

return { 
      restrict: 'E', 
      scope: {item: '@'}, 
      templateUrl: '/views/product.html', 

      link: function(scope, element, attributes){ 
       scope.item = scope.$eval(attributes.item); 
      } 
     }; 

で動作するように取得することができた。しかし$のevalの使用はもちろん、（悪いスタイル）の本当に受け入れられません。

これを達成するための正しい方法は何ですか？ productDirectiveにコントローラを追加する

Answer 1

試してみてください。

var productDirective = function() { 
    return { 
      restrict: 'E', 
      scope: {item: '='}, 
      templateUrl: '/views/product.html', 
      controller: ['$scope', function($scope) {}] 
     }; 
}; 

Answer 2

これが失敗したスコープので： '=' が唯一のリピートngのためではなく、$スコープに結合します。

私は非常にあなたが上で何を意味するのか理解していないが、あなたはディレクティブの親スコープからオブジェクトをバインドする際にバインディングコンテキストで=は便利です - 実際にはコントローラであるディレクティブをディレクティブの分離されたスコープに使用していて、ng-repeatではありません。

したがって、実際には、親コントローラのオブジェクトを$evalトリックのディレクティブの分離スコープにバインドする必要はありません。

親のコントローラでは、productsのアレイを正しく定義していることを確認してください。

ここでは、どのように動作させることができるのDemoです。

Answer 3

スコープ： '='は$ scopeにのみバインドされ、ng-repeatにはバインドされないため、これは失敗します。

ng-repeatは、すべての反復のためのスコープを作成し、$indexのような他のループVARSと一緒にそこに現在のproductを置くので、それはませは失敗するはずです。したがって、productは実際にスコープにあり、通常どおりにバインドできます。

FIDDLEを作成しましたが、これを確認するコードは変更されていません。