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-Problem Directive

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}}，而不是我们当时实际插入的值。

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

所以我想看到的是：

开始处理Easydialog指令。
将{{useableButton}}更改为其中的任何内容。
然后在{{useableButton}}。

Answer 1

我认为你可以通过在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 2

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

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

嵌套指令内绑定的问题

3 个答案: