基于翻译字符串加载指令
Load directive based on translation string
所以我想根据来自 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>'
}
});
所以我想根据来自 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>'
}
});