A few days ago, someone in the ui-grid forum asked me how to insert a button into a cell when it is focused – and only in the first column.
The first thought was – create a cell template and add it to the cellTemplate column definition.
This might look something like:
'<button ng-show="focused" ng-href="{{row.entity[col.name]}}">Click</button>'
Or in the case you wanted to do some unique function:
'<button ng-show="focused" ng-click="row.entity.someMethod()">Click</button>'
Looks nice and it works.
Thinking more in a Web Components state of mind, I’ve sent him the following solution:
In the above demo, I’ve created a directive that is called specialButton. This button is very simple, but you can do whatever you want with it – and you could give it to another programmer who uses ui-grid, and he could use it out of the box and use any method on anything the grid has access to (including the grid’s appScope which is the context given to the grid in the gridOptions.
This solution gives you much more control with what happening in the template. In addition, you move the logic from the view to the controller (which you can infer from its name that it should be the boss and in control…).
Take-home message: directives are angular’s web components. The more you use them, the more your view looks cleaner, and it is easier for you to debug, test and reuse parts of your code again. Not to mention the benefits of being able to upgrade to ng2 with more ease (won’t say easily, since until I see a proof to that, it’s going to be a painstaking process).