Question

我们正在使用Angular，我们在指令中解析变量时遇到了麻烦。这个小提示显示了我们的问题：

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

我已经看到了一些解决这个问题的答案：

使用过滤器翻译这些内容。 - 这实际上是我们当前的解决方案，但这阻碍了我们不同的功能。
在控制器中附加手表。 - 我们实际上想避免在我们的控制器中使用手表，因为如果你有很多代码，它会使代码变脏。

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

Answer 1

您可以手动插值，然后使用所需范围的$ eval函数解析它。

这是小提琴：http://jsfiddle.net/VX5LE/66/

translate-directive的代码：

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

在指令内使用指令会导致绑定问题

1 个答案: