$broadcast appending dynamic data (rows) at wrong place using ng-scrollbar

Question

I have used ng-scrollbar like this :

<tbody ng-scrollbar  rebuild-on="rebuild:me" class="scrollme" id ="tempID">

and in ng table , included the broadcast

getData: function($defer, params) {

        $scope.$broadcast('rebuild:me');

Now the ng-repeat is populating the tr in thead after first th instead of appending/loading it correctly in tbody

how to correctly display my results?

no it works on table as well.I have tried using both static as well as dynamic data... the problem is with the $broadcast which is not reloading the dynamic data and delegating in the correct order as it should be. — user2067736, Oct 09 '14 at 12:28

Kostia Mololkin · Answer 1 · 2014-10-24T08:26:03.733

did you try this

getData: function($defer, params) {
      $defer.promise.then(function(){
        $scope.$broadcast('rebuild:me');
};
...

right after updating table

Edit 1

tbody is replacing by div and thus how layout became messy,check plunk

Edit 2

Here some workaround about this,need some editing,i will update later

Edit 3(final)

Finally get working example of ngtable and ngscrollbar together,but its not most beautiful solution but still:

1.

you need separate thead from rest of table into new table which locate right above main table

<thead>
    <tr >
    <th  class="sortable" ng-class="{
                    'nameasc':'sort-asc' ,
                    'namedesc':'sort-desc'
                    }[sortTableParam]"
                    ng-click="SortBy('name')">
                    <div>name</div>
                </th>
                <th class="text-center sortable" ng-class="{
                    'ageasc':'sort-asc' ,
                    'agedesc':'sort-desc' 
                   }[sortTableParam]"
                    ng-click="SortBy('age')">
                    <div>Age</div>
                </th>
    </tr>
    </thead>
    </table>

2.

second - hide thead in main table and wrap table into div tag,which will be processing by directive:

<div style="height:300px"  ng-scrollbar  rebuild-on="rebuild:me"  class="scrollme">
      <table  ng-table="tableParams" show-filter="true" class="table">
      <thead><tr><th ></th><th ></th></tr></thead>
        <tbody >
          <tr ng-repeat="user in $data">
            <td data-title="'Name'" filter="{ 'name': 'text' }" sortable="name">
                    {{user.name}}

                </td>
            <td data-title="'Age'" sortable="age">
                    {{user.age}}
                </td>
          </tr>
        </tbody>
      </table>
   </div>

3.

Clicks from header will trigger reloading data with sorting option,by binding SortBy function

 var sorting = $scope.tableParams.$params.sorting;
          var dir = sorting != null ? (sorting[param.toString()] == 'asc' ? 'desc' : 'asc') : 'asc';
          var sort={};
          sort[param.toString()]=dir;

          $scope.tableParams.sorting(sort);
          //edit classes in header for rows imaging(check plunk)
          updatesorting(param);
        };

let me set up plunk a lit bit later to find out what's going on — Kostia Mololkin, Oct 10 '14 at 05:52
http://plnkr.co/edit/8VFlqs0p40HH75wQiYGV?p=preview i don't now how make it right except somehow recompile directive ,like here http://stackoverflow.com/a/19129131/4104866 ,`tbody` is substituted by `div` and thus all layout become mess — Kostia Mololkin, Oct 10 '14 at 07:50
if you dont want to dig in directive you better use another table directive like http://angular-ui.github.io/ng-grid/ which default template for table based on `div`s — Kostia Mololkin, Oct 10 '14 at 08:39
is it a bug that can be raised ... enforced div inside a table — user2067736, Oct 16 '14 at 05:50
you mean that must be checking of what target element,when applying directive? — Kostia Mololkin, Oct 16 '14 at 07:24

$broadcast appending dynamic data (rows) at wrong place using ng-scrollbar

1 Answers1

Edit 1

Edit 2

Edit 3(final)

1.

2.

3.