Question

我想知道如何动态地将属性或属性添加到我的模板中的特定标记。我有这样的指示：

app.directive('myDirective', function() {
    return {
        restrict: 'A',
        template:
            '<div><label>Label: </label><input id="my-id" type="text" attr="attrValue"/></div>'
    };
});

问题1：如何将attr="attrValue"专门放在input元素/标记上？

假设我想写：

<my-directive ... readonly></my-directive>

问题2：如何将readonly属性传递给模板中的input元素？

app.directive('myDirective', function() {
    return {
        restrict: 'A',
        template:
            '<div><label>Label: </label><input id="my-id" type="text" readonly/></div>'
    };
});

Answer 1

指令配置的template属性可以是一个函数，它接收元素和属性作为参数并返回模板（see documentation）。然后，您可以在构建模板时使用这些数据：

.directive('...', function () {
    return {
        template: function (tElement, tAttrs) {
            return '... <input ...' + (tAttrs.readonly ? ' readonly' : '') + '> ...';
        },
        // ...
    };
});

根据元素属性调整指令模板

1 个答案: