4

i18n に angular-translate を使用する angular JS アプリがあります。このアプリは、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 に答える