Налаштування шаблону в рамках Директиви

У мене є форма, яка використовує розмітку з 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>

Там є багато кодових кодів, які я хотів би звести до нової директиви - форма-введення, наприклад:

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

        }
    })

Однак коли я приїжджаю додати вдосконалену функціональність, я зациклююся.

Як я можу підтримати значення за замовчуванням у шаблоні?

Я б хотів виставити параметр "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в директиві присутній, я хотів би додати її до згенерованого <input />у висновку та ігнорувати його інакше. Я не впевнений, як цього досягти.

Я підозрюю, що ці вимоги, можливо, вийшли за рамки простого шаблону, і мені доведеться почати використовувати фази попереднього компіляції, але я втрачаю, з чого почати.

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

Намагався використовувати рішення, запропоноване Міськом, але в моїй ситуації деякі атрибути, які потрібно було об'єднати в мій html-шаблон, самі були директивами.

На жаль, не всі директиви, на які посилається отриманий шаблон, працювали коректно. У мене не було достатньо часу, щоб зануритися в кутовий код і з’ясувати першопричину, але я знайшов рішення, яке може бути корисним.

Рішення полягало в тому, щоб перемістити код, який створює html-шаблон, з компілювати до функції шаблону. Приклад на основі коду зверху:

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

Наведені вище відповіді, на жаль, не дуже працюють. Зокрема, етап компіляції не має доступу до області застосування, тому ви не можете налаштувати поле на основі динамічних атрибутів. Використання етапу зв’язування, здається, пропонує найбільшу гнучкість (з точки зору асинхронного створення дому тощо). Підхід, наведений нижче, стосується:

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

Я створив суть з більш повним кодом та описом підходу.

Ось що я в кінцевому підсумку використав.

Я дуже новачок у AngularJS, тому хотів би бачити кращі / альтернативні рішення.

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>