CODEWITHSUNDEEP
angularjs
Christoph
Christoph

Reputation: 2053

Angular directive with ng-repeat and transclude

I want to create a table template with angularjs. For me it's important to have customizable columns (the innerHTML of the a-column). But i have some problems with the isolatet scope of the ng-repeat. Is there any way to access the the ng-repeat scopes in the transclude of the aColumns?

<a-Table>
    <a-Column><div class="abc">{{item.name}}</div></a-Column>
    <a-Column>{{item.car}}</a-Column>
</a-Table>

a-table directive:

app.directive("aTable", function () {
return {
    restrict: "E",
    transclude: true,
    scope: {},
    template: "<table><tr ng-repeat='item in testValues'><td ng-transclude ></td></tr></table>",
    link: function (scope, tAttrs, attrs, ctrl, transclude) {
        scope.testValues = [{
            name: "Max",
            car: "vw"
        }, {
            name: "Mike",
            car: "bmw"
        }]
    },
};
});

a-column directive:

 app.directive("aColumn", function () {
 return {
     restrict: "E",
     required: '^aTable',
     transclude: true,
     scope: false,
     link: function ($scope, $element, $attrs, ctrl, $transclude) {
         if (!$transclude) {
             console.log($transclude);
         }
         $transclude($scope, function (clone) {
             console.log(clone);
             $element.empty();
             $element.append(clone);
         });
     }
 }
 });

Upvotes: 1

Views: 520

Answers (1)

noypi
noypi

Reputation: 991

here http://plnkr.co/edit/61PzGPnqB79nhO5tDr7S?p=preview:

remove template:

//template: "<table><tr ng-repeat='item in testValues'><td ng-transclude ></td></tr></table>",

add for loop, and a property that refers for the index:

    scope.testValues = [{
        name: "Max",
        car: "vw"
    }, {
        name: "Mike",
        car: "bmw"
    }]

    angular.forEach(scope.testValues,function(v,k){
      var newscope = scope.$new();
      newscope.aTableIndex = k;
      transclude(newscope,function(clone){
        element.append(clone);
      })
    })

the html:

    <div class="abc">{{ testValues[aTableIndex].name }}</div>

....

    <a-Column>{{ testValues[aTableIndex].car }}</a-Column>

Updated

removed inject $compile (not needed), as suggested by Christoph

Upvotes: 1

Related Questions