angularjs - ディレクティブ内でディレクティブを使用するとバインディングの問題が発生する

Question

Angular を使用していますが、ディレクティブ内の変数の解決に問題があります。このフィドルは私たちの問題を示しています：

完全なコードは次のとおりです: http://jsfiddle.net/VX5LE/65/

//data-translate should handle the translating of the useableButton text
app.directive('window', ['translateService', function (translateService) {

    return {
        restrict: 'E',
        transclude: true,
        scope: {
            useableButtons: '='},
        replace: true,
        template:
                '<div>' +
                    '<button data-ng-repeat="useableButton in useableButtons" data-translate>{{useableButton}}</button>' +
            '</div>'
    };
}]);

私はこれを解決するいくつかの答えを見てきました：

1. フィルターを使用してこれらを翻訳します。- 実際にはこれが現在の解決策ですが、さまざまな機能が妨げられています。

2. コントローラにウォッチを取り付けます。- 実際には、ウォッチがたくさんあるとコードがかなり汚れてしまうため、コントローラーでウォッチを避ける必要があります。

できれば、コントローラーを乱雑にすることなく、変換ディレクティブ内に存在するソリューションを見たいと思います。

Answer 1

これを行うには、値を手動で補間してから、目的のスコープの $eval 関数で解析します。

これがフィドルです：http://jsfiddle.net/VX5LE/66/

翻訳ディレクティブのコード:

app.directive('translate', ['translateService', '$interpolate', function (translateService, $interpolate) {
  return {
      restrict: 'A',
      link: function (scope, element, attrs) {
          var pHTML = element.html();
          var parsed = $interpolate(pHTML);
          var translated_result = translateService.translate(scope.$eval(parsed));
          element.text(translated_result);
      }
  }
}]);