Question

I have two directives one which translates strings and one which creates a container with a title. (and some other functionality that was removed to make the example shorter)

Groupbox:

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: '@'}
    };
});

Translate: (also simplified)

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

I use it like this:

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

The idea is that the content of the “groupbox” gets put in the div and the title in the “legend”. After this the legend needs to be translated by the translate directive. This translation does not happen (it just prints settings). When i replace ‘{{title}}’ with ‘settings’ it does get translated.

How can i get the translate directive to operate on the results of the groupbox directive.

Answer 1

I fixed it by adding a compile function that puts the title in the legend directly (without binding). That way it is no different then any other use of my translate directive.

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