基于元素属性调整指令模板 [英] Adjusting directive template based on element attributes

问题描述

我想知道如何动态地添加属性或特性在我的模板特定加价。我有我的指令是这样的：

  app.directive（'myDirective'，函数（）{
    返回{
        限制：'A'，
        模板：
            '＆LT; D​​IV＆GT;＆LT;标签＆gt;标签：＆LT; /标签＆gt;＆LT;输入ID =我-ID类型=文本ATTR =attrValue/＆GT;＆LT; / DIV＆GT;'
    };
}）;
 

问题1：如何将我放在 ATTR =attrValue专门就输入元素/加价？

假如我想要写：

 ＆LT;我的指导性...只读＆GT;＆LT; /我-指令＆GT;
 

问题2：如何传递模板只读属性设置为输入元素

  app.directive（'myDirective'，函数（）{
    返回{
        限制：'A'，
        模板：
            '＆LT; D​​IV＆GT;＆LT;标签＆gt;标签：＆LT; /标签＆gt;＆LT;输入ID =我-ID类型=文本只读/＆GT;＆LT; / DIV＆GT;'
    };
}）;
 

解决方案

的模板指令配置的属性可以是接收元素和属性作为参数和返回功能模板（看到文档）。然后，您可以构建模板时使用这些数据：

  .directive（'...'，函数（）{
    返回{
        模板：功能（tElement，tAttrs）{
            回报...＆LT;输入...'+（tAttrs.readonly'只读'：'？'）+'＆GT; ......;
        }，
        // ...
    };
}）;
 

I would like to know how to dynamically add attribute or property to a specific mark-up in my template. I have my directive like this:

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

Question 1: How would I place attr="attrValue" specifically on input element / mark-up?

Suppose I want to write:

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

Question 2: How can I pass readonly property to the input element in the template?

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

解决方案

The template property of directive configuration can be a function that receives element and attributes as arguments and returns the template (see documentation). You can then use these data when constructing the template:

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

这篇关于基于元素属性调整指令模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！