AngularJS transclude scope в директиве с ng-repeat

Question

Моя цель состоит в том, чтобы иметь директиву, которую я предоставляю, и она повторяет их X раз. Точно так же, как ng-repeat, только я хочу обернуть его в другие функции, такие как ограничение переключения и дополнительные элементы вне транскодированного содержимого.

По какой-то причине переключение не имеет доступа к области выделения директивы независимо от того, что я пытаюсь.

Я использовал функцию transclude внутри link, в нескольких вариантах, безрезультатно. Вот демо:

• Plunkr

И вот суть коды:

app.directive('repeatContents', function() { 
    return { 
    scope: { 
     items: '=repeatContents', 
     limit: '=repeatLimit' 
    }, 
    transclude: true, 
    template: '<div ng-repeat="item in items">' + 
        '<em>Outside transclude: {{item}}</em><br />' + 
        '<ng-transclude></ng-transclude>' + 
       '</div>', 
    link: function(scope, el, attrs, ctrl, transclude) { 
     transclude(scope, function(clone, scope) { 
     el.append(clone); 
     }); 
    } 
    } 
}); 

Если вы посмотрите на plunkr, вы увидите, что за пределами включения {{item}} доступно, но не внутри. Независимо от содержимого функции link, которые должны были позаботиться об этом. Любая идея, что я могу сделать?

Answer 1

transclude:true transcludes содержания, сохраняя при этом ссылки на объем, где содержание включено через из (В нашем случае, repeat-contents будет transclude <other-directive other-item="item"></other-directive>, сохраняя ссылку на внешнюю область. item не определен в наружном объеме и тот факт, что ваша изолированная сфера определяет item не имеет никакого отношения к внешней области

Если вы просто хотите transclude шаблона без сохранения ссылки на него первоначально сферу вы можете использовать следующие diective вместо ng-transclude:.

app.directive('customTransclude', function(){ 
    return { 
     link: function(scope, element, attrs, ctrls, transcludeFn){ 
      if(!transcludeFn){ 
       throw 'Illegal use of custom-transclude directive! No parent directive that requires transclusion was found'; 
      } 

      transcludeFn(scope, function(clone){ 
       element.empty().append(clone); 
      }); 
     } 
    }; 
}); 

, а затем в шаблоне вашего repeat-contents директивы вы можете использовать его как это:

<div ng-repeat="item in items"> 
    <em>Outside transclude: {{item}}</em><br/> 
    <custom-transclude></custom-transclude> 
</div>