使用内部指令指令导致绑定问题 [英] Using directives inside directives causes binding issues

问题描述

我们正在使用的角度，我们遇到与在指令解决变量的麻烦。
这拨弄显示了我们的问题：

We're using Angular and we're having trouble with resolving variables in directives. This fiddle shows our issue:

下面是完整的code： http://jsfiddle.net/VX5LE/65/

Here's the full code: 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>'
    };
}]);

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

I have seen some answers that solve this by:

1. 使用过滤器来翻译这些。 - 这实际上是我们目前的解决方案，但阻碍我们具有不同功能

1. Using a filter to translate these. - That is actually our current solution but that hinders us with different functionality.

在控制器附加手表。 - 实际上，我们希望避免在我们的控制器的手表，因为它使code很脏，如果你有很多他们

Attaching watches in the controller. - We actually want to avoid watches in our controllers as it makes the code quite dirty if you have a lot of them.

preferably我想看到驻留在翻译指令内，而不会弄乱控制器的解决方案。

Preferably I would like to see a solution that resides inside of the translate directive without cluttering the controllers.

推荐答案

您可以通过手动插入值，然后用所需范围的$ eval函数解析它做到这一点。

You can do this by interpolating the values manually, then parsing it with the $eval function of the desired scope.

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

的code中的翻译-指令：

The code of the 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);
      }
  }
}]);

这篇关于使用内部指令指令导致绑定问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！