Question

我有一个角度JS应用程序，使用角度转换为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>

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

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

这里的最小例子：http://jsfiddle.net/Ssn53

Answer 1

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

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

请注意括起该值的大括号。在我的情况下，我不需要包含整个表达式的双花括号，因为它是由指令插入的（通过使用私有范围和'＆amp;'赋值）。

Answer 2

使用角度插值应符合您的要求：

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

请注意双花括号{{}}

AngularJS和angular-translate：在对象文字中使用translate过滤器

2 个答案: