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

Proxying HTML attributes in AngularJS directive with template

本文关键字：HTML 属性 指令 AngularJS 代理      更新时间：2023-09-26

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

这是一个沙盒，没有问题:http://jsfiddle.net/4M9VB/

在这种情况下，我需要给<i>元素应用红色边框，而不是父元素<label>。当然，我可以在link函数中手动代理每个可能的HTML属性，但是有没有更优雅的方法?

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

我看到两个选项(这不是你要求的，但也许它有帮助):

1。定义一个隔离作用域

你可以为模板中需要的所有属性定义作用域变量。

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

小提琴

2。使用transclusion

你可以在指令标签中嵌入样式元素，并使用透传将它们嵌入到指令模板中。

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>

小提琴

事实证明没有这样的机制

相关文章：