在 Umbraco 的管理员自定义网格编辑器中加载数据时如何显示等待消息或加载图像？

Question

我为 Umbraco 后台（或管理员）创建了一个自定义网格插件，但在保存所选项目之前，我想按 ID 获取内容并保存属性。 此 get 调用花费的时间比预期的要长一些，并且由于它使用的是承诺，我希望有一种方法可以通知用户正在加载一些数据。

我找到了这个用于 AngularJS 的自定义指令插件，但我不确定将其连接到 Umbraco Admin UI 的最佳方式。 此外，我认为有一种标准方法来通知用户正在执行操作，并且在完成之前不要离开此页面或再次单击提交。

有没有人对最佳实践有任何想法，用于通知 Umbraco 管理员中的用户正在加载某些内容？

这是我插件控制器中的一些代码：

dialogService.treePicker({
    multiPicker: false,
    treeAlias: 'content',
    section: 'content',
    startNodeId: startNodeIdValue,
    callback: function (data) {
        notificationsService.info("Success", "Selected " + data.name + " (" + data.id + ").");
        //TODO: need a good way to show a loading/wait message 
        //      until the promise is finished
        //this might work but want to use the umbraco admin way 
        //to show a loading / wait message
        $scope.loading = true;
        contentResource.getById(data.id).then(function (content) {
            var icon = content.icon;
            $scope.control.value = {
                id: data.id,
                name: data.name,
                path: data.path,
                icon: icon
            };
            //this might work but want to use the umbraco admin way 
            //to show a loading / wait message
            $scope.loading = false;
            $scope.setPreview();
        });
    }
});

Answer 1

我们的解决方案

我发现 Umbraco 使用的指令称为 umb-load-indicator，它可以工作; 但是，我仍然很好奇是否有更好的解决方案。

现在，这是我使用 $scope.loading 值的视图。

<div ng-controller="MyController">
    <div style="height: 25px;" ng-if="loading">
        <umb-load-indicator></umb-load-indicator>
    </div>
    <div ng-class="usky-editor-placeholder" ng-if="!loading">
        <!-- main content goes here -->
    </div>
</div>

如果您有更好的解决方案，请告诉我。