在指令中自定义模板 [英] Customizing the template within a Directive

问题描述

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

<字段集><legend>图例文本</legend><div class="control-group"><label class="control-label" for="nameInput">Name</label><div class="控件"><input type="text" class="input-xlarge" id="nameInput"><p class="help-block">支持帮助文本</p>

</fieldset></表单>

那里有很多样板代码，我想将它们简化为一个新指令 - form-input，如下所示:

生成:

 
<label class="control-label" for="nameInput">Name</label><div class="控件"><input type="text" class="input-xlarge" id="nameInput">

我通过一个简单的模板完成了这么多工作.

angular.module('formComponents', []).directive('formInput', function() {返回 {限制:'E'，范围: {标签:'绑定'，formId: '绑定'},模板:'<div class="control-group">'+'<label class="control-label" for="{{formId}}">{{label}}</label>'+'<div class="控件">'+'<input type="text" class="input-xlarge" id="{{formId}}" name="{{formId}}">'+'</div>'+'</div>'}})

然而，当我开始添加更高级的功能时，我就陷入了困境.

如何支持模板中的默认值?

我想在我的指令中公开type"参数作为可选属性，例如:

<form-input label="Password" form-id="password" type="password"/></form-input><form-input label="Email address" form-id="emailAddress" type="email"/></form-input>

但是，如果没有指定任何内容，我想默认为 "text".我该如何支持?

如何根据属性的存在/不存在来自定义模板?

我还希望能够支持必需"属性(如果存在).例如:

<form-input label="Email address" form-id="emailAddress" type="email" required/></form-input>

如果指令中存在 required，我想将它添加到输出中生成的 中，否则忽略它.我不确定如何实现这一目标.

我怀疑这些要求可能已经超出了一个简单的模板，必须开始使用预编译阶段，但我不知道从哪里开始.

解决方案

angular.module('formComponents', []).directive('formInput', function() {返回 {限制:'E'，编译:函数(元素，属性){var type = attrs.type ||'文本';var required = attrs.hasOwnProperty('required') ?"required='required'" : "";var htmlText = '<div class="control-group">'+'<label class="control-label" for="' + attrs.formId + '">'+ attrs.label + ''+'<div class="控件">'+'<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.formId + '" ' + required + '>'+'</div>'+'</div>';element.replaceWith(htmlText);}};})

I have a form that is using markup from Bootstrap, like the following:

<form class="form-horizontal">
  <fieldset>
    <legend>Legend text</legend>
    <div class="control-group">
      <label class="control-label" for="nameInput">Name</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="nameInput">
        <p class="help-block">Supporting help text</p>
      </div>
    </div>
  </fieldset>
</form>

There's a lot of boilerplate code in there, that I'd like to reduce to a new directive - form-input, like follows:

<form-input label="Name" form-id="nameInput"></form-input>

generates:

   <div class="control-group">
      <label class="control-label" for="nameInput">Name</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="nameInput">
      </div>
    </div>

I have this much working via a simple template.

angular.module('formComponents', [])
    .directive('formInput', function() {
        return {
            restrict: 'E',
            scope: {
                label: 'bind',
                formId: 'bind'
            },
            template:   '<div class="control-group">' +
                            '<label class="control-label" for="{{formId}}">{{label}}</label>' +
                            '<div class="controls">' +
                                '<input type="text" class="input-xlarge" id="{{formId}}" name="{{formId}}">' +
                            '</div>' +
                        '</div>'

        }
    })

However it's when I come to add in more advanced functionality that I'm getting stuck.

How can I support default values in the template?

I'd like to expose the "type" parameter as an optional attribute on my directive, eg:

<form-input label="Password" form-id="password" type="password"/></form-input>
<form-input label="Email address" form-id="emailAddress" type="email" /></form-input>

However, if nothing is specified, I'd like to default to "text". How can I support this?

How can I customize the template based on the presence / absence of attributes?

I'd also like to be able to support the "required" attribute, if it's present. Eg:

<form-input label="Email address" form-id="emailAddress" type="email" required/></form-input>

If required is present in the directive, I'd like to add it to the generated <input /> in the output, and ignore it otherwise. I'm not sure how to achieve this.

I suspect these requirements may have moved beyond a simple template, and have to start using the pre-compile phases, but I'm at a loss where to start.

解决方案

angular.module('formComponents', [])
  .directive('formInput', function() {
    return {
        restrict: 'E',
        compile: function(element, attrs) {
            var type = attrs.type || 'text';
            var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
            var htmlText = '<div class="control-group">' +
                '<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' +
                    '<div class="controls">' +
                    '<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.formId + '" ' + required + '>' +
                    '</div>' +
                '</div>';
            element.replaceWith(htmlText);
        }
    };
})

这篇关于在指令中自定义模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！