基于翻译字符串的加载指令

Question

所以我想根据来自 angular-translate 的翻译在 html 页面中插入一个指令。 假设我有这两个指令：

.directive('englishText', function() {
  return {
    template: 'Hello'
  };
});
.directive('spanishText', function() {
  return {
    template: 'Hola'
  };
});

我有这两个 json 文件，翻译将从中来：

english.json
{
"LANGUAGE" : "english-text"
}

---

spanish.json
{
"LANGUAGE" : "spanish-text"
}

所以在 html 页面上我想要这样的东西：

<div {{'LANGUAGE' | translate}}></div>

但作为输出，我只是得到这个：

<div {{'language' | translate}}></div>

而不是

<div english-text>Hello</div>

我也试过这个：

<{{'LANGUAGE' | translate></{{'LANGUAGE' | translate}}>

但我得到这个作为输出

<english-text>

它的解释就像一个 innerHTML 而不是一个标签...

Answer 1

如果您坚持按照您要求的方式执行此操作，则父指令将 $compile 一个基于语言的指令并将内部 html 替换为新指令

.directive('languageDirective', function($compile) {
    return {
        restrict: 'EA',
        link: linkFn,
        scope: {
            language: '@'
        }
    };

    function linkFn(scope, element, attrs) {
        element.html(
            $compile(getTemplate)($scope)
        );
    }

    function getTemplate() {
        if(scope.language === 'english')
            return '<div english-directive></div>'
        else
            return '<div other-directive></div>'
    }
});