I have a complex table to be generated that has pagination and sorting
capabilities. I have created a customTable directive. I am still running on
AngularJS 1.0.7 for compatibility purposes. This code is a part of a
Cordova application. I am testing on KitKat 4.4.4 (that uses Chrome
WebView). I am finding a lot of DOM Nodes that are leaking. I have seen
other issues that talk about this as a V8 issue. Can you kindly point me in
the right direction?
Directive Code is as below:
appDirectives.directive('customTable', function() {
return {
restrict : 'A',
replace : true,
templateUrl : 'templates/tableDirective.html',
scope : {
ngshow : '=',
caption : '@',
oddRowClass : '@',
evenRowClass : '@',
headerNeed : '=',
multipleHeader : '=',
subHeaderNeed : '=',
sortable : '=',
pageSize : '=',
paginator : '=',
ngModel : '=',
tableName : '@',
tableClass : '@'
},
link : function(scope, elem, attrs) {
scope.headerOrder = "order";
scope.subHeaderOrder = "order";
scope.subHeaderPredicate = '';
scope.subHeaderReverse = false;
scope.headerPredicate = '';
scope.headerReverse = false;
scope.subHeaderPaginatorPredicate = '';
scope.subHeaderPaginatorReverse = false;
scope.headerPaginatorPredicate = '';
scope.headerPaginatorReverse = false;
scope.currentPageNumber = 0;
scope.paginatorColSpan
scope.getValuesOrdered = function(key, clickedValue, e) {
if (clickedValue == 'subHeader') {
if (scope.paginator) {
scope.subHeaderPaginatorPredicate = key;
scope.subHeaderPaginatorReverse = !(scope.subHeaderPaginatorReverse);
} else {
scope.subHeaderPredicate = key;
scope.subHeaderReverse = !(scope.subHeaderReverse);
}
} else if (clickedValue == 'header') {
if (scope.paginator) {
scope.headerPaginatorPredicate = key;
scope.headerPaginatorReverse = !(scope.headerPaginatorReverse);
} else {
scope.headerPredicate = key;
scope.headerReverse = !(scope.headerReverse);
}
}
if ($(e.target).hasClass("sorter_arrow_dwn")) {
$(e.target).toggleClass("sorter_arrow_dwn sorter_arrow_up");
} else {
$(e.target).toggleClass("sorter_arrow_up sorter_arrow_dwn");
}
}
scope.getValue = function(row, key) {
return row[key.map];
}
scope.checkDecimal = function(number) {
var convertedNumber;
if (number % 1 != 0) {
convertedNumber = Math.round(number * 100) / 100;
}
if (isNaN(convertedNumber))
convertedNumber = number;
return convertedNumber;
}
scope.clickedPage = function(pageNumber) {
scope.currentPageNumber = (pageNumber - 1);
}
scope.tableValueRows = "";
eval("scope.tableValueRows = " +
attrs.tableValues.split("'").join('"').split("ngModel").join("scope.ngModel"));
if (attrs.headerColumns != "") {
eval("scope.headerColumns = " + attrs.headerColumns.split("'").join('"'));
}
if (attrs.subHeaderColumns != "") {
eval("scope.subHeaderColumns = " +
attrs.subHeaderColumns.split("'").join('"'));
}
if (scope.subHeaderColumns != undefined) {
scope.paginatorColSpan = scope.subHeaderColumns.length;
} else if (scope.headerColumns != undefined) {
scope.paginatorColSpan = scope.headerColumns.length;
}
scope.pageList = [];
var noOfPages = scope.tableValueRows.length / scope.pageSize;
for (var i = 0; i < noOfPages; i++) {
scope.pageList[i] = (i + 1);
}
}
}
});
```
The directive template is as below:
<div class="detailed_view_table_container" ng-show="ngshow">
<span class="illustrator_details_table_title"
translate="{{caption}}"></span>
<div class="illustrator_table_outer_container">
<div class="illustrator_table_inner_container">
<table id="{{tableName}}" class="illustrator_details_table
{{tableClass}}">
<thead ng-if="headerNeed && !multipleHeader">
<tr ng-if="subHeaderNeed" class="illustrator_table_head">
<th bind-once ng:repeat="headerColumn in headerColumns"
colspan="{{headerColumn.colspan}}"
translate="{{headerColumn.translateid}}"></th>
</tr>
</thead>
<thead ng-if="headerNeed && multipleHeader">
<tr ng-if="subHeaderNeed" ng:repeat="headerColumn in headerColumns"
class="illustrator_table_head">
<th bind-once ng:repeat="header in headerColumn.row"
colspan="{{header.colspan}}" translate="{{header.translateid}}"></th>
</tr>
</thead>
<tbody>
<tr ng-if="subHeaderNeed && sortable" class="illustrator_table_row
illustrator_table_first_row row_even">
<td bind-once ng:repeat="subHeaderColumn in subHeaderColumns |
orderBy:subHeaderOrder"><a href=""
ng-click="getValuesOrdered(subHeaderColumn.map,'subHeader')"
translate="{{subHeaderColumn.translateid}}"></a></td>
</tr>
<tr ng-if="subHeaderNeed && !(sortable)" class="illustrator_table_row
illustrator_table_first_row row_even">
<td bind-once ng:repeat="subHeaderColumn in subHeaderColumns |
orderBy:subHeaderOrder">
<a class="table_sort_arrow sorter sorter_arrow_dwn"
ng-if="(subHeaderColumn.columnSortable)" href=""
ng-click="getValuesOrdered(subHeaderColumn.map,'subHeader', $event)"
translate="{{subHeaderColumn.translateid}}"></a>
<span ng-if="!(subHeaderColumn.columnSortable)"
translate="{{subHeaderColumn.translateid}}"></span>
</td>
</tr>
<tr ng-if="!(paginator) && subHeaderNeed" ng:repeat="tableValueRow in
tableValueRows | orderBy:subHeaderPredicate:subHeaderReverse"
ng-class="{illustrator_content_row_odd : $index%2==0,
illustrator_content_row_even : !($index%2==0)}">
<td bind-once ng:repeat="subHeaderColumn in subHeaderColumns |
orderBy:subHeaderOrder"
ng-bind="checkDecimal(tableValueRow[subHeaderColumn.map])"></td>
</tr>
<tr ng-if="paginator && subHeaderNeed" ng:repeat="tableValueRow in
tableValueRows |
orderBy:subHeaderPaginatorPredicate:subHeaderPaginatorReverse |
paginate:currentPageNumber:pageSize" ng-class="{illustrator_table_row_odd :
$index%2==0, illustrator_table_row_even : !($index%2==0)}">
<td bind-once ng:repeat="subHeaderColumn in subHeaderColumns |
orderBy:subHeaderOrder"
ng-bind="checkDecimal(tableValueRow[subHeaderColumn.map])"></td>
</tr>
<tr ng-if="!(paginator) && (headerNeed && !(subHeaderNeed))"
class="illustrator_table_row_odd">
<td bind-once align="center" valign="middle" class={{headerColumn.class}}
colspan="{{headerColumn.colspan}}" ng:repeat="headerColumn in
headerColumns" translate="{{headerColumn.translateid}}"></td>
</tr>
<tr ng-if="!(paginator) && (headerNeed && !(subHeaderNeed))"
ng:repeat="tableValueRow in tableValueRows |
orderBy:headerPredicate:headerReverse" ng-class="{illustrator_table_row_odd
: $index%2==0, illustrator_table_row_even : !($index%2==0)}">
<td bind-once ng:repeat="tableValueColumn in tableValueRow"
translate="[[checkDecimal(tableValueColumn)]]"></td>
</tr>
<tr ng-if="!(subHeaderNeed) && !(sortable)" ng:repeat="tableValueRow in
tableValueRows" ng-class-odd="'illustrator_table_row_odd'"
ng-class-even="'illustrator_table_row_even'">
<td bind-once ng:repeat="tableValueColumn in tableValueRow"
translate="{{tableValueColumn}}"></td>
</tr>
</tbody>
</table>
</div>
</div>
Kindly excuse me for pasting big code chunks.
Please find below the Chrome Dev Tools Profile. I did 3 snapshots and
compared them.
<https://lh5.googleusercontent.com/-PYnVoOHq0Uc/VDozQZkdC1I/AAAAAAAAX7M/6lx-9bpJcyU/s1600/Screen%2BShot%2B2014-10-12%2Bat%2B1.22.05%2Bpm.png>
Kindly help.
--
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.
