0

我有两个指令，一个是翻译字符串，一个是创建一个带有标题的容器。（以及为使示例更短而删除的一些其他功能）

组框：

myapp.directive('groupbox', function () {
    return {
        restrict: 'E',
        priority: 200,
        template:
            '<fieldset>' +
            '<legend data-translate>{{title}}</legend>' +
            '<div data-ng-transclude></div>' +
            '</fieldset>',
        transclude: true,
        replace: true,
        scope: {title: '@'}
    };
});

翻译：（也简化）

myapp.directive('translate', ['$filter', function ($filter) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var e = $(element);
            var data = attrs.translate;

            var results = $filter('I')(e.html(), data);
            e.html(results.text);
            if (results.tooltip) e.attr('data-tooltip', results.tooltip);
        }
    };
}]);

我这样使用它：

<groupbox title='settings'>
   content
</groupbox>

这个想法是将“组框”的内容放在 div 中，将标题放在“图例”中。在此之后，图例需要由 translate 指令翻译。这种翻译不会发生（它只是打印设置）。当我用“设置”替换“{{title}}”时，它确实被翻译了。

如何让翻译指令对 groupbox 指令的结果进行操作。

4

1 回答 1

0

我通过添加一个编译函数来修复它，该函数将标题直接放在图例中（没有绑定）。这样，它与我的翻译指令的任何其他用途没有什么不同。

myapp.directive('groupbox', function () {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template:
            '<fieldset>' +
                '<legend>' +
                    '<span data-translate></span> - ' +
                    '<a data-ng-click="open = !open" data-translate>toggle</a>' +
                '</legend>' +
                '<div data-ng-show="open" data-ng-transclude></div>' +
            '</fieldset>',
        compile: function(element, attrs) {
            element.children('legend').children('span').html(attrs.title);
        }
    };
});
于 2013-01-25T10:55:48.647 回答