Transclude на нг-повторить

Question

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

Здесь это то, что я сделал до сих пор

<div ng-app="TestApp"> 
    <div ng-controller="TestCtrl"> 
     <test-collector> 
      <test-data xx-value="Mouse" xx-href="https://fb.com" /> 
      <test-data xx-value="Keyboard" xx-href="https://goo.gl" /> 
     </test-collector>   
    </div> 
</div> 

и для контроллера

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

app.controller('TestCtrl', ['$scope', function($scope){ 

}]); 

app.directive("testCollector", function() { 
    return { 
     restrict: "E", 
     scope: {}, 
     transclude: true, 
     replace: true, 
     controller: function($scope) { 

     }, 
     template: '<div>' + 
         '<div ng-transclude></div>' + 
        '</div>' 
    } 
}); 

app.directive("testData", function(){ 
    return { 
     restrict: "E", 
     require: '^testCollector', 
     transclude: true, 
     replace: true, 
     scope: { 
      xxValue: '@', 
      xxHref: "@" 
     }, 
     template: '<a href="{{xxHref}}">{{xxValue}}</a>' 
    } 
}); 

я только получить Mous е

я подготовил скрипку, чтобы увидеть его в действии CLICK HERE

любая помощь, пожалуйста.

Спасибо заранее

Answer 1

Вы баловаться с директивой <test-data> тега. Вы не закрыли test-data. Вы дали закрывающий тег для test-data элемент вроде <test-data />.

HTML

<div ng-app="TestApp"> 
    <div ng-controller="TestCtrl"> 
     <test-collector> 
      <test-data xx-value="Mouse" xx-href="https://fb.com"></test-data> 
      <test-data xx-value="Keyboard" xx-href="https://goo.gl"></test-data> 
     </test-collector>   
    </div> 
</div> 

Working Fiddle