forms - 如何自动将标签添加到输入字段？

Question

我正在用 AngularJS 做一个更大的项目。因此，我想让单个表单的工作尽可能简单。由于我们也在使用 Bootstrap ，因此表单中单个输入字段的代码非常冗长，可能像

<div class="control-group">
  <label class="control-label" for="inputEmail">Email</label>
  <div class="controls">
    <input type="text" id="inputEmail" placeholder="Email">
  </div>
</div>

如果我可以写一个像

<custom-input 
  label="Email" 
  name="inputEmail" 
  placeholder="Email" 
  type="text" 
  ... >
</custom-input>

相反，这将有助于保持代码干净和工作简单。

为了实现这一点，我正在开发一个自定义 AngularJS 指令。我的指令当前使用类似于上面的引导示例的模板，自动将标签分配给输入标签。此外，该指令的编译器函数将所有属性从自定义输入标记移动到真正的输入标记，以便轻松自定义自定义输入标记。

app.directive('customInput', function() {
    return {
      require: 'ngModel',
      restrict: 'E',
      template: '<div>' + 
                    '<label for="{{ name }}">the label</label>' +
                    '<input id="{{ name }}" ng-model="ngModel" />' +
                '</div>',
      scope: {
              ngModel: '=',
              name: '@name',
          },
      replace: true,
      compile: function (tElement, tAttrs, transclude) {
            var tInput = tElement.find('input');

            // Move the attributed given to 'custom-input'
            // to the real input field
            angular.forEach(tAttrs, function(value, key) {
                if (key.charAt(0) == '$')
                    return;
                tInput.attr(key, value);
                tInput.parent().removeAttr(key);
            });

            return;
        },
    };
});

在 Stack Overflow 上，有很多关于创建自定义输入字段的问题，但他们关心的是 data binding , custom formatting或 binding to ng-repeat .

然而，我的方法有一个不同的问题:虽然数据绑定(bind)工作正常，但当输入字段为“必需”时，Angular 的集成表单验证模块会感到困惑。出于某种原因，验证无法识别新的输入字段，而是由于某些无效引用而使表单无效，该引用具有空值。请看 the minimal example .

死引用从何而来？如何更新验证模块的引用？有没有更好的方法来实现我的总体目标？

Answer 1

作为一个 bool 属性，有一个相应的必需属性在您的 div 上仍然为真，即使该属性被移动。

所需的属性没有被移动，它必须被跳过，因为没有值(value)。我什至不知道如何使用没有值的 javascript 将它添加到元素中，而是使用表单 required="required"修复

使用 transclude=true当您移动属性时，将在编译阶段之后使用您的元素的副本，我认为这可以防止设置所需的属性

出于某种原因，您必须分配更高的优先级，可能是因为 ng-model ，它不会从您的 div 中删除，因为 tattrs 中的名称是 ngModel (尽管从 div 中删除并不会删除对优先级的需求)

http://plnkr.co/edit/5bg8ewYSAr2ka9rH1pfE?p=preview

我所做的只是将所需的属性更改为 required="required"并将这两行添加到指令声明中:

  transclude: true,
  priority: 10,

我把 ng-transclude顺便说一下，在模板标签上，因此元素的内容将进入标签中，而您不必为此具有属性。