ngRepeat 瞬间显示重复列表

Question

我有一个弹出式模态框，它会在按钮点击时弹出。模态框的内容是一个项目列表。该列表存储在控制器中，并通过GET请求响应数据进行填充。

每当我重复打开模态框时，隐含地调用了列表的更新，我会短暂地看到多个列表副本 - 大约每次点击一个副本。然后显示的列表会解析为实际存储在列表中的内容。

这可能是控制器或HTML的问题，还是ngRepeat的某种副作用？

以下是来自HTML文件的片段：

<li ng-repeat="itemin vm.items">{{item.name}}</li>

<a href="#" onclick="togglePanel('Panel')" ng-click= "vm.getItems()">View Items</a>

而从控制器中：

getItems(): angular.IPromise<core.IItem> {
        var self: Controller = this;
        return this.itemDataService.getItems()
        .then(function(response: any): angular.IPromise<core.IItem> {
          self.items = response.data;
          return response;
        },
        function(response: any): angular.IPromise<core.IItem> {
          self.items = [];
          return response;
        });
    }

如果您需要查看更多代码，请提出要求。

编辑：额外的代码... 被调用的onClick：

function toggleSavedSearchPanel(id)
{
    var e = document.getElementById(id);

    if (e.style.display == 'block' || e.style.display=='')
    {
        e.style.display = 'none';
    }
    else
    {
        e.style.display = 'block';
        e.focus();
    }
}

- Matthew Fitch

---

问题出在我的CSS代码上；列表的CSS中有一个transition: 0.2s。将其删除后，所有问题都得到了解决。 - Matthew Fitch

Answer 1

提供更多的代码会更有帮助。例如，您在a标签上有一个onclick属性，还有ng-click事件。不知道onclick函数在做什么的情况下很难说清楚发生了什么。

此外，在视图中，您将项目附加到名为vm的作用域属性上，但在控制器中直接将其附加到this/self上。是否有更多的代码将其移动到vm对象中？

听起来您正在处理与API调用相关的时间问题，但是如果没有看到更多的代码，很难确定。

- abiwer

---

关于你的第二段话，我猜他正在使用“controller as”语法。 - muenchdo

我猜那也是情况，但如果没有看到那段代码，我们就不确定。 - abiwer

我已经添加了onClick事件的代码。ng-click调用了我最初发布的getItems()函数。 "vm"是我正在使用的控制器的引用 - 我希望你能相信我。我认为问题很可能是时间问题 - 如果是这种情况，我该怎么解决呢？ - Matthew Fitch

我找出了问题所在：CSS 中列表的过渡时间为 0.2 秒。去掉它后问题都解决了。感谢您的帮助。 - Matthew Fitch