anglejs – 与Angular.js一起支撑

发布时间：2020-12-17 09:42:04 所属栏目：安全来源：网络整理

导读：我试图使用footable( http://themergency.com/footable-demo/responsive-container.htm)和angular.js. 当缩小窗口大小时,仅在单击加号时显示列3,4,5. Angular.js提供了过滤功能,所以当我把一些搜索字符串如下所示：表中的行被过滤. 现在的问题是当我尝试删

我试图使用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');
}

但是没有办法,如果有人可以建议如何解决这个问题.

谢谢.

要添加到 Daniel Stucki’s answer,而不是每次执行ng-repeat执行时添加每个行,您可以等到ng重复完成,然后在父表本身上初始化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();
    }
  };
})

这对于具有多行的表格来说可以更好.

注意元素自动为jQlite/jQuery object,因此不再需要将其包装在$()语法中.

更新

AngularJS的优点之一是双向数据绑定.为了保持FooTable数据与最新数据同步,您可以执行以下操作：

.directive('myDirective',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();

    });
  };
})

范围.$evalAsync包装器在DOM准备好但在显示之前执行,从而防止数据闪烁.额外的触发器和重绘方法强制初始化的FooTable实例在数据更改时进行更新.

该指令保留用户体验 – 任何FooTable排序,过滤或分页保留仍然存在 – 无论何时更新数据,都能无缝加载数据.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!