How to extend smart-tables using custom directives

[ojhughes]

Hello,

Thanks for your brilliant work. Could you provide a simple example of how to extend smart tables with a custom directive that access the API.

Thank you

[lorenzofox3]

Hello,
I don' know what you exactly mean by "extend". But any directive inside the smart-table directive can access the table API, it means :
-the built in directives that you can modify if you want (in Directives.js)
-any directive you associate to a cell template (using cellTemplateUrl property for example)
If you want a running example, you can go on the demo site.

Please note on the custom.js tab

1. the require: '^smartTable' which means that the directive expect to find in its parent element the directive smartTable (
2. the link function has a parameter ctrl wich is a reference to the table controller.

for more information about directive controller you can see the documentation

cheers,

Laurent

[ojhughes]

Thanks, when I add a new directive to Directives.js with require: ^smartTable i get an error saying cant find smartTable controller

[lorenzofox3]

because your directive must have a parent elment in the markup wich has the 'smart-table' directive.

So it must be either one the directives you see in the table template, or one you will insert thanks to the cellTemplateUrl of your column config.

I suggest you watch [https://github.com/lorenzofox3/Smart-Table/blob/master/smart-table-module/partials/smartTable.html](this video), this explains what is a directive controller

Laurent

[ojhughes]

Ah I understand now, thanks. Apologies I am very new to angular and still getting my head around directives.

[lorenzofox3]

no problem

[morgs32]

Hi @lorenzofox3 I'd love to access the ctrl in the smartTableDataCell directive (which I'm trying to customize). But it comes up undefined. Probably an obvious thing I don't understand??
Thanks.

[lorenzofox3]

Hi,
As mentioned on the developer guide, you have to ask for it in your directive using the require property :

return {
                require: '^smartTable',
                link: function (scope, element, attr, ctrl) { 
                }
};

Laurent

[morgs32]

Ahh. Thanks a ton. I'm getting a kick out of forking your project. Learning a lot from it.