1

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);
         });
     }
 }
 });
Christoph
  • 1,993
  • 1
  • 25
  • 33
  • I believe you can only have one `ng-transclude` in your directive template. Therefore you can't have it inside an `ng-repeat` - this is off the top of my head so i'm not absolutely sure. Perhaps using `$compile` would help. – m.e.conroy Sep 02 '14 at 13:18
  • 1
    @m.e.conroy Hi, thank you for your awnser. It's possible to have more then one ng-transclude. See here http://stackoverflow.com/questions/16181602/angularjs-advanced-tabs-two-ng-transclude I think the problem is the isolateted scope. – Christoph Sep 02 '14 at 13:24
  • 1
    I'm confused. Is there any problem with your code? Everything seems to work fine in this [plunker](http://plnkr.co/edit/k2NqvLlIPKkMpIvh4sZV?p=preview). – bmleite Sep 02 '14 at 13:26
  • @bmleite Thank you for your comment. It really works in your plunker. Unfortunately, it doesn't seem to work with the latest stable release (1.2.23) of angular. In your plunker (angular version 1.3.0-beta.5) everything works fine. – Christoph Sep 02 '14 at 13:39
  • It works with version 1.3.0-beta.1 up to 1.3.0-beta.10. With 1.3.0-beta.11 up to 1.3.0-beta.19 it doesn't work. – Christoph Sep 02 '14 at 13:56

1 Answers1

1

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

sss
  • 1,259
  • 9
  • 23