javascript - 使用模板代理 AngularJS 指令中的 HTML 属性

Question

我使用模板创建了自定义指令并替换:true。我可以设置从原始元素代理所有属性的目标元素吗？有没有像ngTransinclude这样的机制？默认情况下，它们代理到模板的父元素。

这是一个沙箱，不是问题:http://jsfiddle.net/4M9VB/

所以在这种情况下我需要将红色边框应用于 <i>元素，非父元素 <label> 。当然，我可以在链接函数中手动代理每个可能的HTML属性，但是有更优雅的方法吗？

UPD:请注意，这个问题比这个 jsfiddle 示例更普遍

Answer 1

我看到两个选项(这不完全是您所要求的，但也许有帮助):

<强>1。定义隔离范围

您可以为模板中所需的所有属性定义范围变量。

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

Fiddle

<强>2。使用嵌入

您可以将样式元素嵌入到指令标记中，并使用嵌入将它们嵌入到指令模板中。

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

在 HTML 中:

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

Fiddle