Question

我实现了像这样的md-list：

<md-list>
    <md-list-item class="md-3-line" ng-repeat="file in index.files | orderBy:'type'" ondrop="drop(event)" ondragover="allowDrop(event)" ng-click="$parent.getContent(file, $event)">
        <img ng-src="{{file.face}}" class="md-avatar" alt="{{file.name}}">
        <div class="md-list-item-text" layout="column">
            <h3>{{ file.name }}</h3>
            <h4 ng-if="file.size > 0">{{ file.size }}</h4>
            <p>{{ file.mime }}</p>
        </div>
        <div class="md-list-item-text" layout="column" style="max-width: 300px;">
            <p>{{ file.lastmod }}</p>
        </div>
    </md-list-item>
</md-list>

如您所见，列表将遍历一个名为files的容器。它在我的索引控制器中最初定义：

this.files = directoryService.getContent();

被叫服务“directoryService”提供目录的内容，并按如下方式实现：

  app.factory('directoryService', function() {
    var content = [];

    return {
        path,
        getContent: function() {
            console.log("returning directory content");
            return content;
        },

        updateList: function(incfiles) {
            console.log("refreshing directory content");
            content.length = 0;
            Array.prototype.push.apply(content, incfiles);
        }
    };
});

连接到webdav服务器后，列表显示根目录中的所有文件，这完全正常。单击列表中的目录后，方法（getContent）再次调用服务器（http调用）以获取所单击目录的内容：

   $scope.getContent = (file, ev) => {
        console.log(file);
        if (file.type == "directory") {
            listDirectoryContent(currentPath + file.name);
        }
    };

方法listDirectoryContent（）将调用服务器并更新与md-list连接的directoryService.files对象：

 listDirectoryContent = (path) => {
        var lclfiles = [];

        var imagePathFolder = 'public/img/folder.svg';
        var imagePathFile = 'public/img/file.svg';
        var imagePathUp = 'public/img/back.svg';

        clientService.client
            .getDirectoryContents(path)
            .then(function(contents) {
                //Set default folders.
                lclfiles.push({
                    ...
                });
                contents.forEach(function(element) {
                    if (element.type == "file") {
                        lclfiles.push({
                            ...
                        });
                    } else {
                        lclfiles.push({
                            ...
                        });
                    }
                }, this);
                directoryService.updateList(lclfiles);
            })
            .catch(function(err) {
                alert(err);
                console.error(err);
            });
    }

});

所以基本上发生的是，我等到使用.then（）完成http调用。之后，我通过调用directoryService.updateList（newfiles）将新内容放入directoryService.files数组中。

接下来发生的事情是，md-list没有更新其内容UNTIL我单击一个随机文件...单击文件后列表正确显示.files的内容...似乎UI /列表刷新太迟了......我想错过什么吗？

谢谢你们。

Answer 1

我很幸运，遇到了一个也有这个问题的人。我不知道这是不是一个好方法！但它对我有用。在我的directoryService中，我用以下语句包围了update方法内容：

updateList: function(incfiles) {
            console.log("refreshing directory content");
            $q.when(true).then(() => {
                content.length = 0;
                Array.prototype.push.apply(content, incfiles);
                console.log(content);
            });

        }

该列表现在正在运行。单击目录后，只要http调用完成，就会显示新内容。

我希望这有助于某人。

干杯

角度材料md-list更新后没有刷新

1 个答案: