基于AngularJS的材料设计Lite表刷新问题

Question

我使用mdl数据表mdl数据表和ng重复实现一个简单的分页功能。它可以工作，但有一个恼人的问题:每当我翻页时，表就会闪烁。例如，如果表有20行，而每页有10行，mdl表将首先显示20，然后在10秒钟内将其缩小为10行。

如果我删除mdl-data-table mdl data- table，而只使用表，一切都会正常工作，完全没有闪存。但我当然失去了MDL风格。

我想知道是否都更新了DOM，不知怎么的MDL更新了表两次。但我不知道该去哪修。打电话给mdl window.componentHandler.upgradeAllRegistered()；似乎并不重要。

请帮帮忙。谢谢。

代码的一部分如下所示。initData函数只设置分页变量和数据数组的初始值。

<div ng-init="initData()"></div>
<table class="mdl-data-table mdl-js-data-table mdl-data-table__cell--non-numeric">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="n in datalists | pagination: curPage * pageSize | limitTo: pageSize" ng-controller="VhlCtrl">
            <td>{{$index}}</td>
        </tr>
    </tbody>
    <button class="mdl-button mdl-js-button mdl-button--icon mdl-button" ng-disabled="curPage == 0" ng-click="curPage=curPage-1">
        <i class="material-icons">skip_previous</i>
    </button>
    Page {{curPage + 1}} of {{ numberOfPages() }}
    <button class="mdl-button mdl-js-button mdl-button--icon mdl-button" ng-disabled="curPage >= datalists.length/pageSize - 1" ng-click="curPage = curPage+1">
        <i class="material-icons">skip_next</i>
    </button>
</table>

Answer 1

MDL适用于静态网站，而不是网络应用程序。

考虑使用角质材料

Answer 2

我发现导致这个问题的是mdl-data-table类和背景颜色变化动画。因此，通过复制材料设计表的样式，减去背景转换，我最终创建了一个新的表类。下面是CSS：

.my-table {
    position: relative;
    border: 1px solid rgba(0, 0, 0, .12);
    border-collapse: collapse;
    font-size: 14px;
    background-color: #ffffff;
}
.my-table th, td {
    position: relative;
    vertical-align: middle;
    text-align: left;
    text-overflow: ellipsis;
    height: 48px;
    box-sizing: border-box;
    padding: 12px 12px 12px 18px;
    border-top: 1px solid rgba(0, 0, 0, .12);
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.my-table th {
    font-size: 12px;
    color: rgba(0, 0, 0, .54);
    font-weight: bold;
}

将mdl-data-table替换为my- table 类到表，尽管它实际上并没有修复AngularJS中重复的数据绑定，但它应该能工作。

Answer 3

不要浪费你的时间建立你的桌子。使用npm和保龄球中可用的mdDataTable

链接：https://github.com/iamisti/mdDataTable

下面是它的演示：http://iamisti.github.io/mdDataTable/