使用 angular-material 按钮在 ng-repeat 中出现奇怪的短持续时间重复行为

Question

This is a code pen for the (stripped down) material version and this 是（精简版）bootstrap 版本。除了依赖关系之外，所有 javascript 都是相同的。

我有一个使用 bootstrap css 的服务器端分页指令（我不确定 angular-bootstrap 库是否没有分页时间或者如果我还没有找到它）。我决定将它移植到 angular-material，认为指令逻辑可以完全重用，我可以只切换模板。在 angular-material 版本中，构成寻呼机的所有 md 按钮都会瞬间复制，然后在每次重建寻呼机时消失。我在每次 ajax 调用后重建寻呼机，因为过滤器可以更改总页数。寻呼机的精简版如下：

app.controller('pagerCtrl', [
            '$scope', 'userService', function ($scope, userService) {
                var self = this;

                self.pageNumber = 1;
                self.page = function (number) {
                    self.pageNumber = number;
                    self.refresh();
                }
                self.refresh = function () {
                    userService.loadAllUsers().then(function (users) {
                        self.users = [].concat(users.data);
                        self.paging = users.paging;
                        self.buildPager();
                    });
                }
                self.buildPager = function () {
                    var pages = [];
                    for (var i = 1; i < self.paging.numberOfPages + 1; i++) {
                        pages.push({ number: i, isActive: self.pageNumber === i });
                    }
                    self.pages = [].concat(pages);
                }
                self.refresh();
            }]);

This is a code pen for the (stripped down) material version and this 是（精简版）bootstrap 版本。除了依赖关系之外，所有 javascript 都是相同的。

我想知道这是否是预期的行为，以及我是否可以采取任何措施来停止瞬时复制。在设置页面之前，我尝试了几种清空页面的变体，将页面设置为 [].concat(pages) 就像他们在演示项目中所做的那样。

如有任何想法，我们将不胜感激。

Answer 1

禁用动画解决了这个问题（尽管它可能会破坏其他东西）。

看看this pen。

我全局禁用动画，问题消失了。

app.run(function($animate){
    $animate.enabled(false);
})

您也可以在本地禁用元素的动画。

使用 angular-material 按钮在 ng-repeat 中出现奇怪的短持续时间重复行为

Odd short duration duplication behavior in ng-repeat with angular-material buttons

angularjs

angular-material