Proxying HTML attributes in AngularJS directive with template

Question

I created custom directive with template and replace: true. Can I set the destination element of proxying all attributes from original element? Is there a mechanism like ngTransclude? By defaults they proxying to parent element of template.

This is a sandbox, not a problem: http://jsfiddle.net/4M9VB/

So in this case I need to apply red border to <i> element, not parent <label>. Of course, I can manually proxy each possible HTML attribute in link function, but is there more elegant way?

UPD: Please notice that the problem is more general than this jsfiddle example

Answer 1

It turns out there is no such mechanism

Answer 2

I see two options (it is not exactly what you asked for but maybe it helps):

1. Define an isolated scope

You can define scope variables for all attributes you need in your template.

app.directive("myCheckbox", function () {
    return {
        scope: {
            style: '@'
        },
        restrict: 'E',
        template:
            '<label>' +
            '  <input type="checkbox">' +
            '  <i style="{{style}}">Test</i>' +
            '</label>',
        replace: true
    };
});

Fiddle

2. Use transclusion

You can embed the styled elements in your directive tag and use transclusion to embed them in your directive template.

app.directive("myCheckbox", function () {
    return {
        restrict: 'E',
        transclude: true,
        template:
            '<label>' +
            '    <input type="checkbox">' +
            '    <p ng-transclude></p>' +
            '</label>',
        replace: true
    };
});

In your HTML:

<my-checkbox class="class1">
  <i style="border: 1px solid red">test</i>
</my-checkbox>

Fiddle