所以我想根据来自 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,而不是一个标签...
最佳答案
如果您坚持按照您要求的方式执行此操作,则父指令将$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>'
}
});
关于javascript - 基于翻译字符串的加载指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35009802/