angularjs - AngularJS 的 Material Design Lite 表刷新问题

Question

我正在使用 mdl-data-table mdl-js-data-table 和 ng-repeat 来实现简单的分页功能。它有效，但有一个恼人的问题:每当我翻页时，表格就会闪烁。例如如果表有 20 行，每页有 10 行，mdl 表将首先显示 20，然后在十分之一秒内将其缩小为 10 行。

如果我删除类 mdl-data-table mdl-js-data-table 并仅使用表，则一切正常，根本没有闪光。但我当然失去了 MDL 风格。

我想知道 Angular 和 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 适用于静态网站，不适用于网络应用程序。

考虑使用Angular Material