source

ngRepeat inside angularjs 디렉티브의 $index

lovecheck 2023. 3. 18. 08:44
반응형

ngRepeat inside angularjs 디렉티브의 $index

커스텀 디렉티브와 함께 사용되는ngRepeat 내에서 인덱스 위치를 얻을 수 있는 최선의 방법을 찾고 있습니다.제가 해결하려고 하는 문제는 ngRepeat의 각 반복에 대해 해당 인덱스 위치에 따라 커스텀템플릿을 작성할 수 있는 옵션을 원합니다.

더 나은 방법이 없는 한 지침의 다음 문서를 기반으로 이 기능을 수행하려고 합니다.

& 또는 &attr - 부모 범위의 컨텍스트에서 식을 실행하는 방법을 제공합니다.속성 이름이 지정되지 않은 경우 속성 이름은 로컬 이름과 동일한 것으로 간주됩니다.범위 정의 {localFn:'&myAttr'}을(를) 지정하면 분리 범위 속성 localFn이 개수 = + 값 식에 대한 함수 래퍼를 가리킵니다.독립 스코프에서 식을 통해 부모 스코프로 데이터를 전달하는 것이 바람직합니다.이것은 로컬 변수 이름과 값의 맵을 식 래퍼 fn에 전달함으로써 실행할 수 있습니다.예를 들어 식이 increment(금액)인 경우 localFn을 localFn({금액: 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);
                }
            }
        });

마지막으로 명령어가 참조되고 있는 부모 템플릿의 컨트롤러 내에서 "test" 함수를 정의하려고 합니다.

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

그래서 첫 번째 문제는 부모에서 '테스트' 기능이 전혀 실행되지 않는다는 것입니다.부모 컨트롤러 내의 테스트 함수를 호출하는 방법을 이해하지 못할 수 있습니다.저도 아직 증가하지 않았습니다만, 테스트 기능을 기동할 수 있다면, 그 시점에서 카운트를 늘리는 것이 올바른 방법입니까?

대신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) {
            // ...
        }
    }
});

만지작거리다.

지적하신 대로 $index를 사용하여 인덱스를 잡을 수 있습니다.

테스트 기능이 실행되지 않는 이유로 실행하지 않았습니다.디렉티브의 링크 기능에는 다음과 같은 것이 필요합니다.

scope.$eval(attrs.myAttr);

언급URL : https://stackoverflow.com/questions/14133141/index-of-ngrepeat-inside-angularjs-directive

반응형