esvit / ng-table

Simple table with sorting and filtering on AngularJS
http://esvit.github.io/ng-table
BSD 3-Clause "New" or "Revised" License
2.77k stars 851 forks source link

Reuse row header template #917

Open esinek opened 8 years ago

esinek commented 8 years ago

I've implemented a column that is checkable and also have a header template for that column that toggles all checkable checkboxes in that column

<tr ng-repeat="tran in $data" title="{{vm.getRowTitle(tran)}}">
<td header="'gridHeaderCheckbox_template'" style="text-align: center;">
    <input type="checkbox" class="chkRow" ng-disabled="(!tran.allowEdit)" ng-checked="vm.isRowChecked(tran)" id="cb-{{tran.Id}}" value="{{tran.Id}}"
            name="cb" tabindex="0" title="Select Row" ng-click="vm.selectTran(tran)">
    <label for="cb-{{tran.Id}}" aria-label="Select Row">&nbsp;</label>
</td>

and the header template looks like this:

<script type="text/ng-template" id="gridHeaderCheckbox_template">
    <input type="checkbox" ng-model="vm.checkboxes.checked" id="checkAll" value="">
    <label for="checkAll" aria-label="Select All Rows">&nbsp;</label>
</script>

The individual row checkboxes need to be part of the definition of the table and therefore must be defined for each table that supports checkboxes. I would like the have the header checkbox template be defined once for all consumers of that template, but it's difficult because all consumers' controller must be "ControllerAs" "vm".

How can I refactor the header checkbox template to be more generic and consumed by all tables that need this template - without having to have all Controllers be "vm" or rewriting the template for each Controller using their specific ControllerAs alias?

anuja-joshi commented 8 years ago

@esinek as you will add 'gridHeaderCheckbox_template' to some html file, say 'gridHeaderCheckbox_template.html' and then you will need to include that html file where ever you have ng-table which uses this header template. like:

<ng-include src="'gridHeaderCheckbox_template.html'" ng-init="vm = HomeCtrl" > </ng-include>

and ng-init to pass current scope to template so that you can usevm in template, irrespective of whatever name of your "ControllerAs" is, here ControllerAs is HomeCtrl . Hope this helps.