我尝试实现一个指令,该指令必须用角标记{{...}}更新特定的代码块。问题在于更新的代码不再编译。
指令:
.directive('i18n', [function() {
'use strict';
return function(scope, element) {
var bindLabel = '{{labels.' + element.text() + '}}',
//create an empty object
obj = {
};
obj[element.text()] = '';
//extend the labels
angular.extend(scope.labels, obj);
element.text(bindLabel);
};
}])
简单的HTML代码:
<title i18n>title</title>
编译后的HTML代码:
<title i18n="">{{labels.title}}</title>
所需的输出:
<title i18n="">This is my title :)</title>
{{labels.title}}
在 Controller 中实现。谢谢您的帮助!
最佳答案
要动态编译DOM元素,请使用$compile
服务:
element.html(value);
// Compile the new DOM and link it to the current scope
$compile(element.contents())(scope);
在您的示例中,它看起来像这样:
.directive('i18n', [ '$compile', function($compile) {
'use strict';
return function(scope, element) {
var bindLabel = '{{labels.' + element.text() + '}}',
//create an empty object
obj = {
};
obj[element.text()] = '';
//extend the labels
angular.extend(scope.labels, obj);
// Fill element's body with the template
element.html(bindLabel);
// Compile the new element and link it with the same scope
$compile(element.contents())(scope);
};
}]);
您可以在此处找到更多信息:http://docs.angularjs.org/api/ng.$compile