在指令中定制模板

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

<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> 

在那里有很多样板代码，我想减less到一个新的指令 – formsinput，如下所示：

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

产生：

  <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> 

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

 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>' } }) 

但是，当我来添加更多先进的function，我卡住了。

我如何支持模板中的默认值？

我想暴露“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" 。 我怎样才能支持这个？

如何根据属性的存在/不存在来定制模板？

如果存在，我也希望能够支持“required”属性。 例如：

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

如果required的话出现在指令中，我想把它添加到输出中生成的<input />中，否则就忽略它。 我不知道如何实现这一点。

我怀疑这些要求可能已经超出了一个简单的模板，并且必须开始使用预编译阶段，但是我无法从哪里开始。

Answer 1

 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); } }; }) 

Answer 2

试图使用Misko提出的解决scheme，但在我的情况下，需要合并到我的模板html中的一些属性本身是指令。

不幸的是，并不是所有由生成的模板引用的指令都能正常工作。 我没有足够的时间深入angular码，找出根本原因，但find了解决方法，这可能会有所帮助。

解决的办法是将编译模板的代码移动到模板函数中。 基于上面代码的示例：

  angular.module('formComponents', []) .directive('formInput', function() { return { restrict: 'E', template: 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>'; return htmlText; } compile: function(element, attrs) { //do whatever else is necessary } } }) 

Answer 3

上面的答案不幸的是不太工作。 特别是编译阶段不能访问范围，所以你不能根据dynamic属性自定义字段。 使用链接阶段似乎提供了最大的灵活性（在asynchronous创buildDOM等方面）下面的方法解决了：

 <!-- Usage: --> <form> <form-field ng-model="formModel[field.attr]" field="field" ng-repeat="field in fields"> </form> // directive angular.module('app') .directive('formField', function($compile, $parse) { return { restrict: 'E', compile: function(element, attrs) { var fieldGetter = $parse(attrs.field); return function (scope, element, attrs) { var template, field, id; field = fieldGetter(scope); template = '..your dom structure here...' element.replaceWith($compile(template)(scope)); } } } }) 

我已经创build了一个更完整的代码和方法的写作 要点 。

Answer 4

这是我最终使用的。

我对AngularJS非常陌生，所以很高兴看到更好的解决scheme。

 angular.module('formComponents', []) .directive('formInput', function() { return { restrict: 'E', scope: {}, link: function(scope, 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.html(htmlText); } } }) 

用法示例：

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