내부 ng-transclude의 AngularJS 상위 지시문 범위

Question

상위 지시문의 ng-repeat 반복자 색인을 인쇄하고 싶습니다. 의사 코드 :

index.html을

<div data-repeatable> 
    {{$index}} does not display 
</div> 

template.html

<div ng-repeat="i in getTimes(5) track by $index"> 
    {{$index}} displays correctly 
    <div ng-transclude></div> 
</div> 

는

// Other code omitted 
.directive('repeatable', function() { 
     return { 
     scope: {}, 
     transclude: true, 
     templateUrl: 'template.html' 
     }; 
    }) 

나는 전자를했습니다 app.js 다양한 접근법/개조가 있었지만 지금까지는 아무 것도 작동하지 않았습니다. 어떤 도움이라도 대단히 감사하겠습니다!

감사합니다.

Answer 1

좋아, 어쩌면 매우 해킹 될 수 있으며 모든 버전에서 가져온 AngularJS의 내부 구현 세부 정보에 의존하지만 여전히 ...이 방법이 작동하도록하는 방법입니다.

각도 1.3 분기에서만 작동하는 것으로 나타납니다. 당신이 원하는 경우

var app = angular.module('plunker', []); 
 

 
app.directive('repeatable', function($timeout) { 
 
    return { 
 
    scope: {}, 
 
    transclude: true, 
 
    templateUrl: 'template.html', 
 
    link: function(scope, elem, attrs, nullCtrl, transclude) { 
 
     scope.getTimes = function(n) { 
 
     var arr = []; 
 
     for (var i = 1; i <= n; i++) arr.push(i); 
 
     return arr; 
 
     }; 
 

 
     // needs to be done in $applyAsync so the ng-repeat has 
 
     // time to render all the items 
 
     scope.$applyAsync(function() { 
 
     // using the transclude function just to get hold of the transclude scope 
 
     transclude(function(clone, scope) { 
 
      var ngRepeatScopes = findChildScopesMatching(scope.$parent, isNgRptScope); 
 
      angular.forEach(ngRepeatScopes, function(ngRepeatScope) { 
 
      var transcludedScope = findTranscludedScope(ngRepeatScope); 
 
      transcludedScope.$index = ngRepeatScope.$index; 
 
      }); 
 
     }); 
 
     }); 
 

 
     function findChildScopesMatching(parentScope, predicateFn) { 
 
     var scopes = [], 
 
      currentScope = parentScope.$$childHead; 
 

 
     while (currentScope) { 
 
      if (predicateFn(currentScope)) 
 
      scopes.push(currentScope); 
 
      currentScope = currentScope.$$nextSibling; 
 
     } 
 
     return scopes; 
 
     } 
 

 
     function isNgRptScope(scope) { 
 
     return angular.isDefined(scope.$first) 
 
      && angular.isDefined(scope.$last) 
 
      && angular.isDefined(scope.$index); 
 
     } 
 

 
     function findTranscludedScope(scope) { 
 
     var transcludedScopes = findChildScopesMatching(scope, isTranscludedScope); 
 
     return transcludedScopes[0] || null; 
 
     } 
 

 
     function isTranscludedScope(scope) { 
 
     return scope.$$transcluded; 
 
     } 
 
    } 
 
    }; 
 
});

.ng-repeat-scope { 
 
    background-color: AliceBlue; 
 
    color: darkblue; 
 
    padding: 5px; 
 
    margin: 5px 0; 
 
} 
 
.ng-transcluded-scope { 
 
    background-color: LightGoldenRodYellow; 
 
    color: GoldenRod; 
 
    padding: 5px; 
 
    margin: 0 20px; 
 
} 
 
.nicer-font { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    padding: 0 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> 
 

 
<div ng-app="plunker" class="nicer-font"> 
 
    <div class="container"> 
 
    <p>Top level scope ID: {{$id}}</p> 
 
    <div data-repeatable> 
 
     Transcluded scope. $index = {{$index}}. Scope ID: {{$id}}, parent ID: {{$parent.$id}} 
 
    </div> 
 
    </div> 
 

 
    <script type="text/ng-template" id="template.html"> 
 
    <div ng-repeat="i in getTimes(5) track by $index" class="ng-repeat-scope"> 
 
     Template ng-repeat scope. $index = {{$index}}. Scope ID: {{$id}} 
 
     <div ng-transclude class="ng-transcluded-scope"></div> 
 
    </div> 
 
    </script> 
 
</div>

는 또한 같은 데모 on Plunkr을 볼 수 있습니다.