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. 在控制器中连接手表。- 我们实际上想避免在我们的控制器中使用手表，因为如果你有很多手表，它会使代码变得很脏。

最好我希望看到一个位于 translate 指令内部而不会使控制器混乱的解决方案。

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);
      }
  }
}]);