angularjs - 嵌套指令中的绑定问题

Question

一些帮助您理解问题的背景信息：我们正在使用 angularjs，并且遇到了关于如何处理将句子翻译成外语的问题。我们当前的设置如下所示：

JS 指令：

Rohan.directive('translate', ['$filter', function ($filter) {
    var translateElement = function(element, data, lang){
        var results = $filter('I')(element.html(), data, lang);

        element.html(results.text);
        if (results.tooltip) element.attr('data-tooltip', results.tooltip);
    };

    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
                translateElement(element, attrs.translate, scope.currentLanguage);
            }
        }
    }
}]);

JS-过滤器：

Rohan.filter('I', [function () {
    return  function (key, data) {
        key = $.trim(key);

        var string = "..." + key + "...";

        try {
            string = Langfile[currentLanguage][key].value;
        } catch (e) {
            console.warn("Translation not found: " + JSON.stringify(key));
        }

        return {"text": string};
};

这基本上只是在数组中查找正确的翻译。所以我们面临的问题是当这个数据翻译标签嵌套在其他指令中时，如下所示：

JS-问题指令

Rohan.directive('easydialog', function () {
    return {
        restrict: 'E',
    transclude: true,
        scope: {
            text: '@',
            showDialog: '=',
            useableButtons: '=',
            onDialogClicked: '='},
        replace: true,
        template:
                '<div>' +
                '<easymodal data-show="showDialog" title="confirm" data-close-function data-dismissable="false" data-modalbig="false">' +
                    '<button data-ng-repeat="useableButton in useableButtons" data-ng-click="closeWindow(); onDialogClicked(\'{{useableButton}}\')" data-translate>{{useableButton}}</button>' +
                '</easymodal>' +
            '</div>'
    };
});

输出：

<button>incorrect_input</button>

代替

<button>Your input is incorrect</button> //Or whatever language is selected

所以这导致 Angular 首先解析 data-translate 标签，但在那个时候 {{useableButton}} 仍然是 {{useableButton}} 而不是我们当时实际插入的值。

这可以通过使用该过滤器来解决，但我们实际上希望摆脱它，因为它迫使我们采取不同的解决方法。

所以我想看到的是：

1. 开始处理 Easydialog 指令。
2. 将 {{useableButton}} 更改为其中的任何内容。
3. 然后对 {{useableButton}} 内的任何内容开始数据翻译步骤。

Answer 1

您可能想结帐 angular-translate - http://pascalprecht.github.io/angular-translate

Answer 2

我认为你可以通过在 useablebutton 上添加一个监视来做到这一点，检查未定义的值，并在设置它时编译你的按钮并将其添加到你的元素中。

Rohan.directive('easydialog', function () {
    return {
        restrict: 'E',
    transclude: true,
        scope: {
            text: '@',
            showDialog: '=',
            useableButtons: '=',
            onDialogClicked: '='},
        replace: true,
        template:
                '<div>' +
                '<easymodal data-show="showDialog" title="confirm" data-close-function data-dismissable="false" data-modalbig="false">' +
                '</easymodal>' +
            '</div>'
        link: function(scope,element,attrs) {
            scope.$watch('useablebutton',function() {
                 if (scope.useableButton) {
                      var button = $compile('<button data-ng-repeat="useableButton in useableButtons" data-ng-click="closeWindow(); onDialogClicked(\'{{useableButton}}\')" data-translate>{{useableButton}}</button>')(scope);
                      element.find('easymodal').append(button);
                 }
            }
        }
    };
});

Answer 3

一种解决方案是I直接在指令模板中使用过滤器，如下所示：

        ...
        template:
            '<div>' +
            '<easymodal data-show="showDialog" title="confirm" data-close-function data-dismissable="false" data-modalbig="false">' +
                '<button data-ng-repeat="useableButton in useableButtons" data-ng-click="closeWindow(); onDialogClicked(\'{{useableButton}}\')">{{useableButton | I}}</button>' +
            '</easymodal>' +
        '</div>'

如何修改你的指令以使用 $interpolate 像这样：

Rohan.directive('translate', ['$filter', '$interpolate', function ($filter, $interpolate) {
   var translateElement = function(element, data, scope){
       var value = $interpolate(element.html())(scope);
       var results = $filter('I')(value, data, scope.currentLanguage);

        element.html(results.text);
        if (results.tooltip) element.attr('data-tooltip', results.tooltip);
    };

    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
                translateElement(element, attrs.translate, scope);
        }
    }
}]);