我尝试实现一个指令,该指令必须用角标记{{...}}更新特定的代码块。问题在于更新的代码不再编译。

指令:

.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

09-25 17:10
查看更多