2013-01-03 17 views
33

私は、カスタムディレクティブで使用されるngRepeat内のインデックス位置を取得する最良の方法を見つけようとしています。私が解決しようとしている問題は、ngRepeatを繰り返し実行するたびに、繰り返しのどこにいるかを知りたいので、そのインデックス位置に基づいてカスタムテンプレートを作成できるということです。

これを行うには良い方法がない限り、私はディレクティブからこの文書に基づいて、この機能を実行しようとしています:

&または&のattrを - コンテキストで式を実行する方法を提供します親スコープのattr名が指定されていない場合、属性名はローカル名と同じであるとみなされます。与えられたスコープのウィジェットの定義:{localFn: '& myAttr'}、スコープのプロパティを切り離すlocalFnは、count = count + value式の関数ラッパーを指します。分離されたスコープから式を介して親スコープにデータを渡すことが望ましい場合があります。これは、ローカル変数名と値のマップを式ラッパーfnに渡すことによって実行できます。たとえば、式がincrement(amount)の場合、localFn({amount:22})としてlocalFnを呼び出すことで金額の値を指定できます。

http://docs.angularjs.org/guide/directive

は私がまさにこの文は私に言っているものを理解するいくつかの困難を抱えています。だから、私は何をしようとしたことはこれです...

まず「testTemplate」での私のディレクティブと一緒に使用されてngRepeatディレクティブ:

<ul> 
    <li my-attr="test()" my-directive ng-repeat="value in values" class="span2"> 
    </li> 
</ul> 

次に、私のディレクティブは定義された:

angular.module('myModule', []) 
     .directive('myDirective', function() { 
      return { 
       replace : true, 
       transclude : true, 
       scope : { 
        test: '&myAttr' 
       }, 
       templateUrl: 'partials/myTemplate.html', 
       link : function(scope, element, attrs) { 
        alert(scope.count); 
       } 
      } 
     }); 

最後に、指示文が参照されている親テンプレートのコントローラ内で "test"関数を定義しようとしています。

function TestTemplateCtrl($scope, testTemplate) { 
    $scope.test = function() { 
     alert('in test'); 
     $scope.count = "1"; 
    } 
} 

最初の問題は、親の「テスト」機能がまったく実行されていないことです。たぶん私は、親のコントローラ内のテスト関数を呼び出す必要があります理解していない。今でも実際には増やしていませんが、テスト機能を起動することができれば、その点に達すると私のカウントを増やすという正しい方法です。

+1

私はこれをもっと複雑にする必要があったと思います。スコープを持つリンク関数内のインデックスを取得できます。$ parent。$ index。私はまだ私の "テスト"機能が将来の参照のためだけに発射されていなかった理由を知りたいと思います。 – DavidB

答えて

47

代わりのscope.$parent.$indexあなたはディレクティブの属性として$インデックスを渡して検討するかもしれない:

<li my-directive index="{{$index}}" ng-repeat="value in values"> 

指令:

myApp.directive('myDirective', function() { 
    return { 
     replace: true, 
     // transclude: true, 
     scope: { 
      index: '@' 
     }, 
     template: '<div>testing {{index}}</div>', 
     link: function(scope, element, attrs) { 
      // ... 
     } 
    } 
}); 

Fiddle

+0

いいですよね。これはまさに私が探していたものです。 – DavidB

+6

注意:リンク関数内でインデックス値を使用する場合は、 '@'構文を使用してattrs。$ observe()を使用する必要があります。[この回答を参照](http://stackoverflow.com/questions/14050195/what-is-the-difference-between-in-directive-scope/14063373#14063373)を参照してください。 (テンプレートの値だけを使用している場合は、$ observe()を使う必要はありません。 –

+2

個人的には、私はまだスコープを優先します。ユーザーがあなたの指示を使用しようとするときに覚えておくための追加情報。 スコープを使用する$ parent。リンカーの$ indexは、同じ結果を得ることができるだけでなく、この不要な属性を減らしてディレクティブを消去します。直感的な方法でディレクティブを設計すると、他の人が簡単に再利用できるようになります – zeroliu

2

あなたが指摘したように、$ indexを使用してインデックスを取得できます。

なぜあなたのテスト機能は発砲していないので、あなたはそれを実行しませんでした。あなたのディレクティブのリンク機能では、のようなものが必要になります。

scope.$eval(attrs.myAttr); 
関連する問題