javascript - AngularJS 过滤器依赖于异步调用

Question

我目前正在尝试学习如何使用 Angular，我的任务是重写现有的功能页面以使用 Angular。

我们的核心功能之一在于使用 JavaScript 函数翻译字符串，但是，只有在翻译字符串加载到脚本中之后才应该调用此翻译方法，并且加载是异步完成的。

我们目前使用回调来实现此行为，但由于 Angular 的性质(至少在我看来)，我的数据会在页面渲染后立即显示。

我有要翻译的字符串，但我想在表中显示翻译后的字符串，为此我尝试创建一个过滤器“translate”，它将调用我现有的翻译方法并返回其值。我相信正在发生的事情是，在调用过滤器时，我仍然没有翻译字符串，因为它们可能尚未加载。

我期望的是类似 {{ object.name |翻译}}，其中object.name是一个要翻译的字符串，如“access.granted”，为我提供给定语言的相应翻译字符串，例如“您被授予访问此区域的权限。”。

我不确定这是实现我想要的效果的最佳方式，我还没有太多时间深入研究 Angular ，但我的一个要求是，我不能改变处理翻译的方式，因为我们已经有一个巨大的系统在使用该代码，并且使用 Angular 的新页面必须完全兼容。

我尝试过的:(我当前的过滤器代码)

function ngTranslate (text, backoff) {
    if (backoff != undefined)
        backoff = 100;
    if (backoff > 5000)
        backoff = 5000;

    if (internationalization != undefined && Object.keys(internationalization.messages).length > 0)
        return translate(text);

    setTimeout(function () {
        return ngTranslate(text, backoff * 2);
    }, backoff);
}

app.filter("translate", function ($log) {
    return function (key) {
        $log.info(key);
        return ngTranslate(key);
    };
});

我在这里试图实现的是验证翻译字符串是否已经加载，如果没有，请在短时间内重试，但即使在加载翻译字符串之后，表格上也没有显示任何内容。

这是我的表代码:

<tr data-ng-repeat="product in productList">
    <td>{{ product.name | translate }}</td>
</tr>

提前非常感谢

Answer 1

嗯，我能想到的方法之一是引导模块，加载字符串，然后在回调函数中手动启动 Angular 应用程序

Use this function to manually start up angular application

https://docs.angularjs.org/api/ng/function/angular.bootstrap

这样您就可以确保在初始化应用程序之前加载所有翻译字符串。