4

我有一个 Angular JS 应用程序，它为 i18n 使用 angular-translate。这个应用程序还使用 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

4

2 回答 2

3

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

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

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

于 2015-12-12T22:52:01.050 回答
0

使用角度插值应该满足您的要求：

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

注意双花括号 {{ }}

于 2014-05-06T22:33:43.607 回答