javascript - 双向数据绑定(bind)不适用于 Angular.js 中的指令

Question

我尝试实现一个指令，该指令必须使用 Angular 符号 {{...}} 更新特定代码块。问题是更新后的代码不再编译。

指令:

.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 中实现。

感谢您的帮助!

Answer 1

要动态编译 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