Angularjs 嵌套指令中的绑定问题

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

        ...
        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>'

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

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

Rohan.directive（'easydialog'，function（）{
返回{
限制：'E'，
是的，
范围：{
正文：“@”，
showDialog:“=”，
可用按钮：“=”，
onDialogClicked:“=”}，
替换：正确，
模板：
'' +
'' +
“{{useableButton}}”+
'' +
''
};
});

输出：

<button>incorrect_input</button>

输入不正确

而不是

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

您的输入不正确//或选择了任何语言

因此，这导致首先对数据转换标记进行角度解析，但此时{{useableButton}}仍然是{{useableButton}}，而不是我们当时实际插入的值

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

所以我想看到的是：

开始处理Easydialog指令

将{{useableButton}}更改为其中的任何内容

然后对{{useableButton}中的任何内容启动数据转换步骤

---

一种解决方案是直接在指令模板中使用

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>'

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

---

我认为您可以通过在useablebutton上添加一个watch来实现这一点，检查未定义的值，并在设置该值时编译您的按钮并将其添加到元素中

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

Rohan.directive（'easydialog'，function（）{
返回{
限制：'E'，
是的，
范围：{
正文：“@”，
showDialog:“=”，
可用按钮：“=”，
onDialogClicked:“=”}，
替换：正确，
模板：
'' +
'' +
'' +
''
链接：函数（范围、元素、属性）{
作用域：$watch（'useablebutton'，函数（）{
if（scope.useableButton）{
var-button=$compile（{{useableButton}}}'）（作用域）；
元素。find（'easymodal'）。append（按钮）；
}
}
}
};
});

您可能想签出角度翻译-

这句话可能不太清楚：“这可以通过使用该过滤器来解决，但我们实际上想摆脱它，因为它迫使我们做不同的变通方法。”但我不想使用该过滤器！它会用其他功能限制我们。关于触发d如果语言发生变化，我会再次激活。@Rohan啊，对不起，我显然没有注意到！如果在翻译指令中设置“priority:9000”（或类似的内容）会有什么区别吗？我实际上已经尝试过，优先使用翻译指令会导致指令接收未定义的，而不是{useableButton}。另一种方式导致了我现在遇到的问题。这不仅仅是因为过滤器缺少代码中的“currentLanguage”参数？或者这只是一个输入错误？currentLanguage是一个javascript全局变量，我对代码进行了一些简化，以隐藏“不必要的”细节。