angularjs - 可与 Angular.js 一起使用

Question

我正在尝试将 footable( http://themergency.com/footable-demo/responsive-container.htm ) 与 angular.js 一起使用。



随着窗口大小的减小，仅在单击加号时才显示第 3、4、5 列。

Angular.js 提供过滤功能，所以当我输入如下搜索字符串时:



表中的行被过滤。

现在的问题是当我尝试删除此搜索字符串时，如下所示:



所有的行都再次显示，但 UI 被扭曲了。

我试图在 angular.js 中使用

$scope.$watch('searchStringID', function() {
$('#tableId').trigger('footable_initialize');
}

但没有奏效，如果有人可以建议如何解决这个问题。

谢谢。

Answer 1

添加到 Daniel Stucki's answer ，而不是每次添加每个单独的行 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();
    }
  };
})

这在具有多行的表上可以更好地扩展。

备注 element自动成为 jQlite/jQuery object ，因此不再需要将其包装在 $() 中句法。

更新

AngularJS 的优点之一是双向数据绑定(bind)。要使 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();

    });
  };
})

scope.$evalAsync包装器在 DOM 准备好但在显示之前执行，防止数据闪烁。额外的trigger和 redraw方法强制初始化的 FooTable 实例在数据更改时更新。

该指令保留了用户体验——任何 FooTable 排序、过滤或分页保持不变——同时在数据更新时无缝加载数据。