itsource

Angular에서 부모 스코프 값을 ng 반복 루프에 전달합니다.

mycopycode 2023. 2. 10. 21:53
반응형

Angular에서 부모 스코프 값을 ng 반복 루프에 전달합니다.

이것은 매우 간단한 질문입니다만, 제가 발견한 회피책은 모두 복잡합니다.템플릿 내의 ng-repeat을 사용하여 다음과 같이 오브젝트 배열을 루프하고 있습니다.

<div class="row-fluid" ng-repeat="message in messages.current|filter:'draft'"> 
    {{ message.subject }} ... {{ campaign.name }} ...
</div>

ng-repeat에 의해 새로운 범위가 생성되므로 컨트롤러의 '캠페인' 개체에 액세스할 수 없는 것 같습니다.(어레이 내의 모든 아이템에 캠페인 오브젝트를 추가하는 것 외에) 그 가치를 얻을 수 있는 방법이 있습니까?

잘 부탁드립니다.

$parent를 사용하여 부모 범위에 액세스할 수 있습니다.

<div class="row-fluid" ng-repeat="message in messages.current|filter:'draft'"> 
    {{ message.subject }} ... {{ $parent.campaign.name }} ...
</div>

이 방법은 사용하지 않습니다.$parent. 네스트된 스코프를 통해 위쪽으로 검색하여 사용 중인 오브젝트를 찾습니다.이 오브젝트가 통과해야 하는 스코프의 수는 얼마가 됩니다.

목록이 포함된 범위에서 다음과 같이 목록이 포함된 개체를 속성으로 정의할 수 있습니다.

$scope.obj = {};
$scope.obj.items = ['item1','item2','item3'];

그럼...ng-repeat다음과 같습니다.

<div ng-repeat="item in obj.items | filter:'item3' track by $index">
    {{obj.items[ obj.items.indexOf(item) ]}}
</div>

(사용자는obj.items[ obj.items.indexOf(item) ]보다는obj.items[ $index ]왜냐면$index는 원래 배열이 아닌 필터링된 배열의 인덱스입니다.)

이게 효과가 있는 이유는obj현재 스코프에 존재하지 않습니다.속성에 액세스하려고 하면 Angular는 오류를 나타내지 않고 현재 스코프 위를 찾습니다(그냥 시도한 경우).{{obj}}정의되어 있지 않고, Angular는 높은 스코프를 조사하는 대신 아무것도 제공하지 않는 것에 만족합니다).네스트된 스코프에 관한 유용한 링크는 다음과 같습니다.

저 같은 경우에는track by $index왜냐하면, 나는 그 정보를 얻었기 때문이다.ng-model어레이내의 아이템에 바인드 되어 있어 모델이 갱신될 때마다 입력이 흐려집니다.HTML이 재렌더된 것 같기 때문입니다.사용의 결과track by $index같은 값을 가진 배열 내의 항목이 반복된다는 것입니다.첫 번째 것 이외의 것을 수정하면 이상한 일이 발생합니다.아마도 당신은 그것을 피하기 위해 독특함을 걸러낼 수 있을 것이다.

저는 AngularJS에 비교적 익숙하지 않기 때문에, 뭔가 큰 누락이 있으면 코멘트해 주세요.그래도 이게 먹히니까 적어도 쓰고 있어요.

또 다른 방법은 부모 스코프를 명령어에 스코프 변수로 전달하는 것입니다.

<my-directive 
    md-parent-scope="this" 
    ng-repeat="item in items"></my-directive>

좀 지저분하긴 하지만 부모가 실제로 어떤 존재인지 더 잘 통제할 수 있고 어떤 것이든 전달할 수 있습니다.

언급URL : https://stackoverflow.com/questions/16573954/pass-parent-scope-value-into-ng-repeat-loop-in-angular

반응형