각형 간행물

Question

transclude 동안 #이 아닌 i으로 배열을 호출하려면 어떻게해야합니까? 아래 코드를 사용하면 배열에서 적절한 수의 항목으로 목록을 작성하지만 x 행 수만큼 반환 된 데이터는 마크 업에 지정된대로 object[0]입니다. 내가 반복 할 수있는 것처럼 i을 참조 할 수 없습니다.

나는이 잘못에 대해 생각하고 있습니까, 아니면 방금 누락 되었습니까? 다음으로

나는 그때 내 마크 업에이를 배치이

#### accordion.html #### 
<ion-content scroll="false"> 
<ion-list> 
    <ion-item class="item-stable alertHeader" ng-click="vm.toggleGroup()" ng-class="{active: vm.isGroupActive()}"> 
     <div class="row"> 
      <div class="alertHeaderIcon col-xs-1"> 
       <i class="icon" ng-class="{'icon-watchList':vm.tag == 'Tag1', 'icon-topPerformers':vm.tag == 'Tag2'}"></i> 
      </div> 
      <div class="alertHeaderLabel col-xs-9"> 
       <span class="labelName">{{vm.tag}}</span> 
      </div> 
      <div class="alertHeaderWarning col-xs-1 pull-right"> 
       <span class="label label-pill label-default">7</span> 
      </div> 
      <div class="alertHeaderCaret col-xs-1 pull-right"> 
       <i class="icon" ng-class="vm.isGroupActive() ? 'ion-ios-arrow-down' : 'ion-ios-arrow-forward'"></i> 
      </div> 
     </div> 
    </ion-item> 
    <ion-item class="item-accordion" ng-repeat="i in vm.data" ng-show="vm.isGroupActive()"> 
     <div ng-transclude></div> 
    </ion-item> 
</ion-list> 
</ion-content> 

같은 아코디언을위한 템플릿이 있습니다

#### alerts.html #### 
<ca-accordion class="accordianTest" tag="'Tag1'" data="vm.itemsA"> 
      <div class="row"> 
       <div class="home-alert-icon col col-10"> 
        <i class="icon" ng-class="{'icon-watchList':vm.itemsA[0].wlName == 'labelA', 'icon-topPerformers':vm.itemsA[0].wlName == 'labelB'}"></i> 
       </div> 
       <div class="home-alert-title col col-70"> 
        {{vm.itemsA[0].wlName}} 
       </div> 
       <div class="home-alert-retailers"> 
        {{vm.itemsA[0].wlRetailers}} 
       </div> 
       <div class="home-alert-metric col col-20"> 
        {{vm.itemsA[0].wlPercent}} 
       </div> 
     </div> 
</ca-accordion> 

Answer 1

당신이없는 것은 매개자 내용이하는에 살고 있다는 것입니다 형제 범위는 지시어를 호출 한 것이지, 귀하의 ng-repeat의 범위가 아닙니다. i 여기에 도달 할 수없는 이유 그래서 당신 이잖아 :

<ca-accordion class="accordianTest" tag="'Tag1'" data="vm.itemsA"> 
      <div class="row"> 
       <div class="home-alert-icon col col-10"> 
        <i class="icon" ng-class="{'icon-watchList':vm.itemsA[0].wlName == 'labelA', 'icon-topPerformers':vm.itemsA[0].wlName == 'labelB'}"></i> 
       </div> 
       <div class="home-alert-title col col-70"> 
        {{vm.itemsA[0].wlName}} 
       </div> 
       <div class="home-alert-retailers"> 
        {{vm.itemsA[0].wlRetailers}} 
       </div> 
       <div class="home-alert-metric col col-20"> 
        {{vm.itemsA[0].wlPercent}} 
       </div> 
     </div> 
</ca-accordion> 

만 vm.itemsA 접근 할 수 있습니다.

은 그래서에 대한 가능한 해결책 중 하나가의 매개자 콘텐츠를 외부

을 전체 NG 반복 이동 또는 매개자 내용 안에 사는 것을 의미, 범위와 transclude됩니다 자신의 지시를 작성하는 것입니다 너의 반복의 범위.

/** 
    @desc a copy of the ng-transclude implementation, but makes the transcluded content scope 
    to be in the same scope of where the transcludeWithScope was used (ngTransclude behaivor 
    bound it to the parent scope) 
    */ 
function transcludeWithScopeDirective() { 
    return { 
     restrict: 'EAC', 
     bindToController: true, 
     link($scope, $element, $attrs, controller, $transclude) { 
      function ngTranscludeCloneAttachFn(clone) { 
       if (clone.length) { 
        $element.empty(); 
        $element.append(clone); 
       } 
      } 

      // If there is no slot name defined or the slot name is not optional 
      // then transclude the slot 
      var slotName = $attrs.transcludeWithScope || $attrs.ngTranscludeSlot; 
      $transclude($scope, ngTranscludeCloneAttachFn, null, slotName); 
     }, 


    }; 
} 

angular 
    .module('transcludeWithScope', []) 
    .directive('transcludeWithScope', transcludeWithScopeDirective); 

다음 accordion.html가 NG-transclude 대신 transcludeWithScope를 사용하는 업데이트 :

<ion-item class="item-accordion" ng-repeat="i in vm.data" ng-show="vm.isGroupActive()"> 
    <div transclude-with-scope></div> 
</ion-item> 

및 사용 : 우리의 매개자 내용의 범위에 살고으로 지금 우리가, 내가 액세스 할 수 있습니다 우리의 반복.

<ca-accordion class="accordianTest" tag="'Tag1'" data="vm.itemsA"> 
      <div class="row"> 
       <div class="home-alert-icon col col-10"> 
        <i class="icon" ng-class="{'icon-watchList': i.wlName == 'labelA', 'icon-topPerformers': i.wlName == 'labelB'}"></i> 
       </div> 
       <div class="home-alert-title col col-70"> 
        {{i.wlName}} 
       </div> 
       <div class="home-alert-retailers"> 
        {{i.wlRetailers}} 
       </div> 
       <div class="home-alert-metric col col-20"> 
        {{i.wlPercent}} 
       </div> 
     </div> 
</ca-accordion>