AngularJs：自定义指令中的模板 [英] AngularJs: Customizing the template within a Directive

问题描述

我有一个使用的标记从引导一种形式，如下所示：

 ＆LT;窗​​体类=形横＆GT;
  ＆LT;＆字段集GT;
    ＆LT;传奇＆GT;联想文字＆lt; /传说＆GT;
    ＆LT; D​​IV CLASS =控制组＆GT;
      ＆LT;标签类=控制标签为=nameInput＆GT;名称和LT; /标签＆gt;
      ＆LT; D​​IV CLASS =控制＆GT;
        ＆LT;输入类型=文本级=输入XLARGEID =nameInput＆GT;
        ＆LT; p =班帮助块＆GT;支持帮助文字＆lt; / P＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; /字段集＆GT;
＆LT; /表及GT;
 

那里面有很多样板code，那我想降低到一个新的指令 - 表单输入，就像如下：

 ＆LT;形式输入标签=名称的形式-ID =nameInput＆GT;＆LT; /表单输入＆GT;
 

生成：

 ＆LT; D​​IV CLASS =控制组＆GT;
      ＆LT;标签类=控制标签为=nameInput＆GT;名称和LT; /标签＆gt;
      ＆LT; D​​IV CLASS =控制＆GT;
        ＆LT;输入类型=文本级=输入XLARGEID =nameInput＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

我有这么多的通过一个简单的模板工作。

  angular.module（'formComponents'，[]）
    .directive（'的formInput'，函数（）{
        返回{
            限制：'E'，
            范围： {
                标签：'绑定'，
                formId：'绑定'
            }，
            模板：'＆LT; D​​IV CLASS =控制组＆GT;' +
                            '＆LT;标签类=控制标签为={{formId}}＆GT; {{标签}}＆​​LT; /标签＆gt; +
                            '＆LT; D​​IV CLASS =控制＆GT;' +
                                '＆LT;输入类型=文本级=输入XLARGEID ={{formId}}NAME ={{formId}}＆GT;' +
                            '＆LT; / DIV＆GT;' +
                        '＆LT; / DIV＆GT;'        }
    }）
 

然而，当我来到加入更先进的功能，我被卡住它。

如何支持默认值在模板？

我想揭露类型参数设置为我的指令可选属性，例如：

 ＆LT;形式输入标签=密码的形式-ID =密码TYPE =密码/＆GT;＆LT; /表单输入＆GT;
＆LT;形式输入标签=电子邮件地址的形式-ID =EMAILADDRESSTYPE =电子邮件/＆GT;＆LT; /表单输入＆GT;
 

但是，如果未指定任何内容，我想默认为文字。我如何支持呢？

如何可以自定义模板基础上，presence /不存在的属性？

我也希望能够支持要求的属性，如果它是present。
例如：

 ＆LT;形式输入标签=电子邮件地址的形式-ID =EMAILADDRESSTYPE =电子邮件要求/＆GT;＆LT; /表单输入＆GT;
 

如果要求是指令present，我想将它添加到生成的＆LT;输入/＆GT; 在输出中，并以其他方式忽略它。我不知道如何实现这一点。

我怀疑这些要求已经超越了一个简单的模板，并开始使用pre-编译阶段，但我不知所措我从哪里开始。

解决方案

  angular.module（'formComponents'，[]）
  .directive（'的formInput'，函数（）{
    返回{
        限制：'E'，
        编译：功能（元素，ATTRS）{
            VAR类型= attrs.type || '文本';
            var里面= attrs.hasOwnProperty（'需要'）？ 需要='需要'：;
            VAR的htmlText ='＆LT; D​​IV CLASS =控制组＆GT;' +
                '＆LT;标签类=控制标签为=+ attrs.formId +'＆GT;' + attrs.label +'＆LT; /标签＆gt; +
                    '＆LT; D​​IV CLASS =控制＆GT;' +
                    '＆LT;输入类型=+类型+'级=输入XLARGEID =+ attrs.formId +'NAME =+ attrs.formId +''+需要+'＆GT;' +
                    '＆LT; / DIV＆GT;' +
                '＆LT; / DIV＆GT;';
            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);
        }
    };
})

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