ng-repeat with tables in Angular JS and directives

Question

I am trying to build a responsive data table using Angular with a directive and ng-repeat. I have managed to get the ng-repeat to work with tables: http://jsfiddle.net/raff77/Asb8k/

{}

I am now trying to get it to work with a directive and the ng-repeat does not work. http://jsfiddle.net/raff77/uwGXb/3/

{}

Is there a way to get the ng-repeat to work with your directive or should you build that into your directive. Notice I have built out a solution to add the rows as strings then html but i want to avoid this and do things the Angular way.

Answer 1

You are creating a new scope in the directive as shown here

scope: { gbsdata: '=' },

But "chartdata" is the array you were watching, which is not available in this scope.

scope.$watch("chartdata", function (chartdata) {

Check this fiddle it will help you. http://jsfiddle.net/KLGrV/1/

Answer 2

There seems to be a bug in AngularJS when you want to put 'td's into a table in a directive. See this question Angular Directive Does Not Evaluate Inside ng-repeat and particularly this answer: https://stackoverflow.com/a/15755234/669561. https://github.com/angular/angular.js/issues/1459

And I don't really see, why you want to fill up the table with a directive. Your first approach without the table seems to work perfectly fine and I cannot see any advanteges over using directives.