在指令内自定义模板

18 浏览
0 Comments

在指令内自定义模板

我有一个表单，使用了Bootstrap的标记，如下所示：


  

    Legend text
      
        
        
Supporting help text

这里有很多样板代码，我想将其简化为一个新的指令 - form-input，如下所示：

生成的结果是：

我已经通过一个简单的模板实现了这个功能。

angular.module('formComponents', [])
    .directive('formInput', function() {
        return {
            restrict: 'E',
            scope: {
                label: 'bind',
                formId: 'bind'
            },
            template:   '' +
                            '' +
                            '' +
                                '' +
                            '' +
                        ''
        }
    })

然而，当我尝试添加更高级的功能时遇到了困难。

如何在模板中支持默认值？

我希望将"type"参数作为我的指令的可选属性暴露出来，例如：

然而，如果没有指定任何内容，我希望默认为"text"。我应该如何支持这点？

如何根据属性的存在与否自定义模板？

我还想支持"required"属性，如果存在的话。

例如：

如果指令中存在required，我希望将其添加到生成的中，否则忽略它。我不确定如何实现这一点。

我怀疑这些需求可能超出了简单的模板范畴，需要开始使用预编译阶段，但我不知道从何开始。

0