如何在對象文字中使用promise

Question

在angular-translate版本2.0中， $ translate服務不再返回實際的翻譯，而是一個承諾。 我可以看到這是一個好主意，因為可能會有一些異步加載。 但它讓我困惑如何在我的情況下正確使用服務，因為我在對象文字中使用了$ translate服務，就像這樣

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

問題：如何在對象文字中使用promise？

它應該（根據文檔 ）使用如下：

$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;
   })
})