Wow! I just finished implementing exactly the same thing through custom directives!
How I've made: a "grid" directive without a template, just with a controller that accepts columns and plugins. Then another directive "grid-column" that has some attributes like "label", "width", "name" and a markup inside. On compile phase, I extract the template inside the column and store it on a GridColumn model along with the attributes. Then, I call a method of the parent directive's controller, like "addColumn(column)", to make it available to the grid assembler. Then on link phase I just remove the custom directive's node as it is not necessary. In the parent directive I manually make a template structure with angular.element() and append the columns to both thead and tbody. Finally, I setup a loop to run grid "plugins" that I also register with the same parent/child directive scheme, so the plugins have a chance to modify the DOM structure before it is compiled. After that I have a table structure with rows bound to ng-repeat and columns with the proper templates. I make it all without string templates, which prevents XSS vectors. When it is all ready, I just run $compile() in the template and bind it to the parent grid's scope. So it goes like this: - on grid-column, compile phase, extract the template's information and save to a model. - on grid, link phase, build the base structure for your table and assembly the headers/cells. - run a set of plugins if necessary, to customize the grid without putting the logic in the grid itself - compile it all and bind to "grid" directive's $scope My code took about 120 lines to make it all, split into 3 directives. On Thursday, December 18, 2014 3:14:08 PM UTC-2, Fabio Kobuti wrote: > > > Hello, > I'm new at AngularJS so i'm trying to build a table like WPF (or Windows > Forms) declaration for study purposes. > > I have the following declaration at my HTML > > <custom-table datasource="persons" headers="headers"> > <custom-column header="header" display-member=""/> > <custom-column header="header" display-member=""/></custom-table> > > > OK, my custom-table directive it works fine... > > The problem is, i imaginated the flow as: > > 1. Read the columns inside > 2. Make the THEAD and put headers at my table > 3. Build the TBODY with NG-REPEAT > 4. Replace the custom-table with the table > > I have done the step 2,3, 4, facing problems in step 1 > > On step 1, I have no clue how to read HTML passed as content of my > directive, 'cause on link function, the HTML declared was replaced by > template.html and columns doesn't exists anymore > > Does anyone knows how to solve this problem?? > > Thanks. > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
