AngularJS : transcluding multiple sub elements in a single Angular directive

Question

I am Fairly new to Angular but have been reading quite a lot. I was reading about ng-transclude at http://docs.angularjs.org/guide/directive#creating-custom-directi

Answer 1

Cool question. I'm not sure there is a built in way, but you can do it yourself in a pretty generic way.

You can access the transcluded element by passing in the $transclude service like this:

$transclude(function(clone, $scope) {

Where clone will be a copy of the pre-linked transcluded content. Then if you label the content in the element like this:

    

        
{{text}}
        
{{title}}
    

You can loop over the content and compile it like this:

$scope.transcludes.push($compile(clone[1].children[i])($scope));

Great! now you just need to put the content in the correct place in your template

     '
' +
     '
' +

Then you can in your link function assign the content correctly

angular.element(document.querySelector('#transclude' + i)).append(scope.transcludes[i]);

I set up a fiddle you can play with that has this set up.

Hope this helped!