Как я могу автоматически добавлять метки к полям ввода?

Question

Я работаю над большим проектом с AngularJS. Поэтому я хочу сделать работу для одной формы максимально простой. Как мы также используем самозагрузки код для одного поля ввода в форме, является довольно громоздким, может быть, как

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

на переполнение стека, есть много вопросов, касающихся создания пользовательских полей ввода, но они связаны с data binding, custom formatting или binding to ng-repeat.

У моего подхода, однако, есть другая проблема: хотя привязка данных работает правильно, модуль проверки целостности модуля Углового путается, когда поле ввода «требуется». По какой-то причине проверка не распознает новое поле ввода и вместо этого сохраняет форму недействительной из-за некоторой мертвой ссылки, которая имеет пустое значение. См. the minimal example.

Откуда берутся мертвые ссылки? Как я могу обновить ссылки модуля проверки? Есть ли лучший способ достичь моей общей цели?

Answer 1

1. Как атрибут boolean, существует соответствующее требуемое свойство, которое по-прежнему истинно на вашем div, даже если атрибут перемещен.
2. Обязательный атрибут не перемещается, его нужно пропускать, потому что нет значения. Я не знаю, как добавить его к элементу с помощью javascript без значения, но с использованием формы required="required" исправляет, что
3. Использование transclude=true будет использовать копию вашего элемента после этапа компиляции при перемещении атрибутов, я думаю, что это не позволяет установить требуемое свойство
4. По какой-то причине вам нужно назначить более высокий приоритет, возможно, из-за ng-model, который не удаляется из вашего div, потому что имя в tattrs равно ngModel (хотя удаление из div не удаляется необходимость в приоритете)

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

Все, что я сделал изменения обязательный атрибут быть required="required" и добавить эти две строки в декларации директивы:

transclude: true, 
    priority: 10, 

я положил ng-transclude на этикетке шаблон, кстати, чтобы содержимое вашего элемента будет идти в ярлык, и для этого вам не нужно иметь атрибут.