Question

在angular-translate版本2.0中，$translate service不再返回实际的翻译，而是一个承诺。我可以看到这是一个好主意，因为可能会有一些异步加载。但是在我的情况下，它让我很困惑如何正确使用服务，因为我在对象文字中使用了$ translate服务，比如

$scope.myDefs = [
      ...
      {
            field: 'supplier',
            displayName: $translate('Supplier'),
            cellTemplate: "<div class=\"ngCellText\">...</div>"
      },
      ...
      {
            field: 'supplierSize',
            displayName: $translate('Size'),
            width: 100,
            cellClass: "center"
      }
      ...
];

问题：如何在对象文字中使用承诺？

应该（根据documentation）这样使用：

$translate('HEADLINE').then(function (headline) {
    $scope.headline = headline;
});

Answer 1

如果您知道没有异步内容，则可以使用$translate.instant()，其行为与1.x中的$translate()完全相同。

Answer 2

您需要直接参考。或者是一个对引用有封闭的辅助函数。像：

$scope.myDefs = [
    ...
    createArrayObject({
        field: 'supplier',
        displayName: $translate('Supplier'),
        cellTemplate: "<div class=\"ngCellText\">...</div>"        
    }),
    createArrayObject(.....

]

和其他地方

function createArrayObject(obj){
    obj.displayName.then(function(data){
       obj.displayName = data;
    });
    return obj;  
}

<强>更新

正如Brian在下面提到的那样，编写可以全部使用的通用代码总是一个好主意。

var forEach = angular.forEach,
    isFunction = angular.isFunction;

function resolveProperties(obj){
    forEach(obj,function(val,key){
        if(isFunction(val.then)){
            val.then(function(data){
                obj[key] = data;
            });
        }
    });
}

所以你可以像......一样使用它。

[
    resolveProperties({
        myPropertyToResolve: promiseReturningFunction() 
    }),
    ....   
]

Answer 3

如果你使用ui-grid，解决方法是添加headerCellFilter：'translate'到columnsDefs（表示myDefs），displayName必须有翻译键。

这是，

$scope.myDefs = [
      {
            field: 'supplier',
            displayName: "Supplier",
            cellTemplate: "<div class=\"ngCellText\">...</div>",
            headerCellFilter: 'translate'
      },
      {
            field: 'supplierSize',
            displayName: "Size",
            width: 100,
            cellClass: "center",
            headerCellFilter: 'translate'
      }
];

Answer 4

另一个想法是循环你的文字并用值替换所有的promises。但是我不知道如果你已经解决了承诺，那么如果你打电话会发生什么。

angular.forEach($scope.myDefs, function(element){
   element.displayName.then(function(result){
      element.displayName= result;
   })
})

如何在对象文字中使用promise

4 个答案: