嵌套指令

Question

我有两个指令，一个用于转换字符串，另一个用于创建带有标题的容器。 （以及为了缩短示例而删除的一些其他功能）

组框中：

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>

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

我如何获得translate指令来操作groupbox指令的结果。

Answer 1

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

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);
        }
    };
});