web-dev-qa-db-ja.com

anglejsディレクティブ内でのngの繰り返しのインデックス

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

これを行うより良い方法がない限り、私はディレクティブからのこのドキュメントに基づいてこの機能を実行しようとしています：

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

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);
                }
            }
        });

最後に、ディレクティブが参照されている親テンプレートのコントローラー内で「テスト」関数を定義しようとしています。

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

最初の問題は、親の「テスト」機能がまったく実行されていないことです。たぶん、親コントローラー内のテスト関数がどのように呼び出されるべきかを理解していないのかもしれません。今は実際にもまだ増加していませんが、テスト関数を起動できる場合、その時点に到達したときにカウントを増やすことは上記の正しい方法ですか？

angularjsng-repeat
35
DavidB

の代わりに scope.$parent.$index $ 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) {
            // ...
        }
    }
});

フィドル 。

50
Mark Rajcok

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

テスト関数が起動しない理由として、実行しませんでした。ディレクティブのリンク関数には、次のようなものが必要です。

scope.$eval(attrs.myAttr);
2
asgoth