AngularJS 和 Angular 翻译 : Using the translate filter in an object literal

Question

我有一个 Angular JS 应用程序，它使用 Angular-Translate 进行 i18n 翻译。此应用程序还使用 highcharts.js 显示图表。我在 highcharts-ng 之上构建了一个自定义指令，它允许我将对象文字作为表达式传递，然后用于配置图表的轴:

angular.module('myApp')
  .directive('xxChart', function() {
    return {
      transclude: true,
      template: '<highchart id=id config=config ng-transclude>',
      restrict: 'E',
      scope: {
        id: '=',
        title: '=',
        xxXAxis: '=',
        xxYAxis: '='
      },
      controller: function($scope) {
        $scope.config = {
          options: {
            chart: {
              lineWidth: 10
            },
            xAxis: $scope.xxXAxis,
            yAxis: $scope.xxYAxis,
            plotOptions: {
              spline: {
                lineWidth: 3
              },
              area: {
                lineWidth: 3
              }
            }
          },
          series: [],
          title: {
            text: $scope.title
          }
        };

        this.addSeries = function(name) {
          var series = {
            name: name,
            data: []
          };
          $scope.config.series.push(series);
          return series;
        };
      }
    };
  });

我使用这样的指令:

<xx-chart xx-x-axis="{title: {text: 'My x axis'}}">
...
</xx-chart>

现在我想翻译我的应用程序。我注意到这显然行不通:

<xx-chart xx-x-axis="{title: {text: 'My x axis' | translate}}">
...
</xx-chart>

有没有办法在对象文字中使用翻译过滤器？如果不是，我应该如何在坚持 Angular 架构的同时解决我的问题？

另请注意，我无法以破坏传递包含其他非翻译字段的对象文字的方式更改指令的语义。

这里的最小示例 fiddle :http://jsfiddle.net/Ssn53

Answer 1

我遇到了同样的问题，发现正确的语法是:

busy-tracker="{message:('messageId'|translate)}"

请注意括住该值的大括号。就我而言，我不需要用双花括号括住整个表达式，因为它是由指令插入的(通过使用私有(private)范围和“&”赋值)。