Footable3 and angularjs

Question

I am having an issue getting footable3 working with angularjs. Everything seems to be working as expected; however, footable3 is removing any <a/> links in the table cells. Code below, but if I remove the attribute "my-footable" the links appear (inspect the table, there are <a/> links), but I can't figure out why they are removed when using the directive (inspect the table, there are no <a/> links)

I used angularjs/footable as a starting point

Here is my directive

app.directive('myFootable', function () {
  return function (scope, element) {

    var footableTable = element.parents('table');

    if (!scope.$last) {
      return false;
    }

    scope.$evalAsync(function () {

      if (!footableTable.hasClass('footable-loaded')) {
        footableTable.footable();
      }

      footableTable.data('__FooTable__').draw();

    });
  };
}

and here is my table

 <table class="table footable">
          <thead>
            <tr>
              <th>Team</th>
              <th>Player</th>
              <th data-breakpoints="xs sm" data-type="number">Games</th>
              <th data-sorted="true" data-direction="DESC" data-type="number">Points</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="item in players" my-footable>
              <td>{{item.teamName}}</td>
              <td><a href="/#/players/{{item.playerId}}">{{item.playerName}}</a></td>
              <td class="text-right">{{item.games}}</td>
              <td class="text-right">{{item.points}}</td>
            </tr>
          </tbody>
        </table>

score 1 · Accepted Answer · answered Dec 25 '15 at 19:16

got it to work by changing the directive to:

 function () {
  return function ($compile, scope, element) {

    if (!scope.$last) {
      return false;
    }

    var footableTable = element.parents('table');

    scope.$evalAsync(function () {

      if (!footableTable.hasClass('footable-loaded')) {
        footableTable.footable();
      }

      footableTable.data('__FooTable__').draw();

      $compile(element.contents())(scope);
    });
  };
}

Footable3 and angularjs

1 Answers1