Transclude on ng-repeat

Question

im trying to repeat a directive inside the directive so i can have a template on each of directive but the problem is i can only show the first entry when using ng-transclude

Here is what i've done so far

<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>

and for the controller

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>'
    }
});

i only get Mouse

i prepared a fiddle to see it in action CLICK HERE

any help please.

Thank you in advance

score 1 · Accepted Answer · edited Jan 18 '15 at 19:07

1

You're messing with your directive <test-data> tag. You haven't close the test-data. You gave self closing tag to test-data element like as <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

edited Jan 18 '15 at 19:07

Mikko Viitala

8,344
4
37
62

answered Jan 18 '15 at 18:52

Pankaj Parkar

134,766
23
234
299

1

Hi @pankajparkar can i add another question? just related to this anyway, my question is how to add the upon click on button? here is some sample http://jsfiddle.net/yk3f8kvo/7/ – Vincent Dagpin Jan 19 '15 at 06:22
after adding question let me know. I'll some time on it. – Pankaj Parkar Jan 19 '15 at 06:33
here it is @pankajparkar http://stackoverflow.com/questions/28019280/adding-directive-inside-the-directive-programatically – Vincent Dagpin Jan 19 '15 at 06:50
I solved it.check answer http://stackoverflow.com/questions/28019280/adding-directive-inside-the-directive-programatically/28019431#28019431 – Pankaj Parkar Jan 19 '15 at 07:01

Transclude on ng-repeat

1 Answers1