I am interested in creating a unique custom directive that can take an array of strings and display it as a table. Here is an example of how I envision it:
'string1' | 'string2' | 'string3' | 'string4'
'string5' | 'string6' | 'string7' | 'string8'
'string9' | 'string10' | 'string11' | 'string12'
To use this custom directive, it should be called like this:
<div class="my-directive" values="values" rowsize="4"></div>
My plan to achieve this is to first divide the values
array into smaller arrays based on the given rowsize
, and then utilize nested ng-repeat
to render the table. The resulting HTML structure within the directive will resemble this:
<table>
<tr ng-repeat="part in parts">
<td ng-repeat="value in part">
{{value}}
</td>
</tr>
</table>
In order to accomplish this, I need to perform some initial logic inside the directive (usually handled in the link
function) before generating the template (typically defined in the template
attribute).
Although this directive could be created using manual DOM manipulation, I prefer following Angular practices for a more streamlined approach.
So, my question remains: How can I implement a custom directive where I can execute initial logic before generating a template?