Footable3 和 angularjs

Question

我在让 footable3 使用 angularjs 时遇到问题。一切似乎都在按预期进行；但是，footable3 正在删除 table 单元格中的所有 <a/> 链接。下面的代码，但是如果我删除属性 "my-footable" 链接出现（检查 table，有 <a/> 链接），但我无法弄清楚为什么在使用指令（检查 table，没有 <a/> 链接）

我使用 angularjs/footable 作为起点

这是我的指令

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();

    });
  };
}

这是我的 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>

Answer 1

通过将指令更改为：

使其工作

 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 和 angularjs

Footable3 and angularjs

angularjs

angularjs-directive

footable