我正在尝试使用 footable(http://themergency.com/footable-demo/responsive-container.htm）以及 angular.js。
随着窗口大小的减小，仅当单击加号时才会显示第 3、4、5 列。
Angular.js 提供过滤功能，所以当我输入如下搜索字符串时：
表中的行已被过滤。
现在的问题是当我尝试删除此搜索字符串时，如下所示：
所有行再次显示，但用户界面扭曲。
我尝试使用 angular.js 中的回调
$scope.$watch('searchStringID', function() {
$('#tableId').trigger('footable_initialize');
}
但没有用，如果有人可以建议如何解决这个问题。
Thanks.
要添加到丹尼尔·斯塔基的回答，而不是每次添加每一行ng-repeat执行时，您可以等到 ng-repeat 完成，然后在父表本身上初始化 FooTable：
.directive('myDirective', function(){
return function(scope, element){
var footableTable = element.parents('table');
if( !scope.$last ) {
return false;
}
if (! footableTable.hasClass('footable-loaded')) {
footableTable.footable();
}
};
})
这在具有许多行的表上可以更好地扩展。
Note element自动是一个jQlite/jQuery 对象，因此不再需要将其包装在$() syntax.
Update
AngularJS 的优点之一是双向数据绑定。要使 FooTable 数据与最新数据保持同步，您可以执行以下操作：
.directive('myDirective', 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.trigger('footable_initialized');
footableTable.trigger('footable_resize');
footableTable.data('footable').redraw();
});
};
})
The scope.$evalAsync一旦 DOM 准备好但在显示之前，包装器就会执行，以防止数据闪烁。额外的trigger and redraw方法强制初始化的 FooTable 实例在数据更改时更新。
该指令保留了用户体验 - 任何 FooTable 排序、过滤或分页都保持不变 - 同时在数据更新时无缝加载数据。