New bindings in already compiled page

Question

I have a problem using the footable plugin with angular, the problem is that footable appends new table rows to my table, but it pastes raw html text instead of angular replaced values, I mean {{'COMMENT'|translate}} instead of 'Comment' (see 'appended table image')

appended table image

I added click event, to perform special action to reevaluate, but I am not sure how to rebind the element HTML.

Table html

<th data-hide="phone,tablet" >{{'QUANTITY'| translate}}</th>
...
<tr ng-repeat="item in items | filter:itemsFilter"  on-last-repeat ng-click="rowExpanded($event)" >
   <td>{{item.Stock}}</td>
   ...
</tr>

Please let me now if you need more info. I'm quite stuck, tried googling, but i thing I don't know the term of my problem.

EDIT: It seems to me that footable caches table headers on init, and then reuses those values that are not compiled by angular yet, maybe that could help to find the answer.

Problem is that angular doesn't know that details row exist, and bindings inside it aren't replaced with values

expanded first row with console view

Of course we need more informations : http://stackoverflow.com/help/mcve — Magus, Oct 07 '15 at 07:19
Table headers use the same binding, afaik footable takes header text and puts it in new details row. As i reduce the window size, columns disappear and, their header binding text ({{'QUANTITY'|translate}}) appear in the details row. — Ernis, Oct 07 '15 at 07:27
Yes you are right. Are you getting the correct text for desktop view? if so, when you resize what kind of issue you are facing. Can you look into the browser console and let us know? — Jeeva J, Oct 07 '15 at 07:30
Well while the quantity is displayed in the header it has correct text ('Quantity'), but when i resize window and it goes to the details row, the column name text there becomes the binding expresion ('{{'QUANITITY'|translate}}'), I tried binding regular text (string from controller) as well with no success — Ernis, Oct 07 '15 at 07:45
No exceptions, everything works fine, angular parses the the html without details, row, and when i resize footable plugin adds new rows to the table and angular doesn't now about them, so i see the binding expressions. I somehow need to tell angular to reparse the element or something — Ernis, Oct 07 '15 at 09:55

Ernis · Accepted Answer · 2015-10-16T06:09:59.673

I figured out, that I need to recompile next element that is appended to the footable, I added ng-click on table rows:

<tr ng-repeat="item in items | filter:itemsFilter"  on-last-repeat ng-click="rowExpanded($event)" >

Then in the controller, I found that currentTarget.nextElementSibling will return, next table row, which happens to be that uncompiled, new details row, so $compile does the trick. However this doesn't work when the row is already expanded and window being is resized, added columns in the details row will be in {{variablename}} syntax. But I guess I can live with that downside

$scope.rowExpanded = function($event){
    $timeout(function(){
        console.log($event.currentTarget.nextElementSibling);
        $compile($event.currentTarget.nextElementSibling)($scope);
    });

};

EDIT: Ok this didn't work when I used the <progressbar> template. Because at the time when footable reads data it is just a bunch of divs, and when i ask angular to compile those, it cant compile because bunch of divs isn't a >progressbar<

But yet, I found another solution, I delayed the footable initialization after everything is done on angular side:

TL;DR; I removed class 'footable' from table so it wont initialize automatically and call .footable() on the table element only after all of the ng-repeat rows were added (and compiled) to the table. This solves all my current footable/angular relation problems.

score -1 · Answer 2 · answered Oct 07 '15 at 07:26

-1

Try spacing out your translation statement, so instead of

{{'COMMENT'|translate}}

try

{{ 'COMMENT' | translate }}

answered Oct 07 '15 at 07:26

Saghir

1
1

Translation works, as the header text uses the same binding. It doesn't work in dynamically added details row. – Ernis Oct 07 '15 at 07:28

New bindings in already compiled page

2 Answers2