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
'source' 카테고리의 다른 글
ng-repeat 및 limitTo를 사용하여 표시되는 항목 수 제한 (0) | 2023.03.18 |
---|---|
오브젝트가 비어 있는지 확인하고 컨트롤러에서 ng-show로 동작하지 않는지 확인합니다. (0) | 2023.03.18 |
URL이 있는 JavaScript를 사용하여 HTML 코드 가져오기 (0) | 2023.03.18 |
각도에서의 $window.location.replace를 조롱하는 방법JS 유닛 테스트? (0) | 2023.03.18 |
봄 JUnit:자동 배선 구성 요소에서 자동 배선 구성 요소를 모의하는 방법 (0) | 2023.03.18 |