37

カスタム ディレクティブで使用される 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";
    }
}

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

4

2 に答える 2

51

代わりに、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) {
            // ...
        }
    }
});

フィドル。

于 2013-01-03T16:02:24.497 に答える
1

ご指摘のとおり、$index を使用してインデックスを取得できます。

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

scope.$eval(attrs.myAttr);
于 2013-01-03T06:44:59.777 に答える