Question

我正在使用AngularJS开发应用程序来打印业务表单。从Google Cloud Endpoint检索数据，使用角度翻译进行翻译，然后打开打印对话框。

我的应用程序几乎可以使用，但有时打印对话框会在翻译完成之前打开。

MyContoller.js是这样的。

app.controller('MyController', ['$scope','$location','errorServiceFactory',
    function ($scope,$location,errorServiceFactory) {
        var param = $location.search();
        $scope.list = [];
        loadingPanelFadeIn();
        gapi.client.myCloudEndpoint.retrieve({
            id:param.id,
        }).execute(function (resp) {
            if(!resp.code){
                loadingPanelFadeOut();
                $scope.list = resp.items;
                $scope.$apply();
                window.print();
            }else{
                errorServiceFactory.errorService(resp);
            }
            loadingPanelFadeOut();
        });

    }]);

像这样的HTML。

<div class="myclass" ng-repeat="item in list">
    <span class="big" style="(snip)" translate="title"> val1 </span>
    <span class="big" style="(snip)" translate="to" translate-values="{to: '{{item.field1}}'}"> val2 </span>
        :

在大多数情况下，翻译的值会显示在打印预览中，但有时会显示val1 val2。

如何在翻译完成后修复程序以打开打印对话框？

Answer 1

您可以使用'resolve'来解决此问题。

从the doc for resolve

中选择一些句子

“您可以使用resolve为控制器提供自定义状态的内容或数据。”

“如果这些依赖项中的任何一个是promise，它们将在实例化控制器并触发$ stateChangeSuccess事件之前被解析并转换为值。”

Answer 2

只需隐藏内容，直到加载DOM

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

<div ng-cloak>
	<div class="myclass" ng-repeat="item in list">
		<span class="big" style="(snip)" translate="title"> val1 </span>
		<span class="big" style="(snip)" translate="to" translate-values="{to: '{{item.field1}}'}"> val2 </span>
	</div>
</div>

AngularJS：如何等待翻译完成

2 个答案: