Dostosowywanie szablonu w ramach dyrektywy

Mam formularz, który używa znaczników z Bootstrap, na przykład:

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

Jest tam dużo gotowego kodu, który chciałbym zredukować do nowej dyrektywy - form-input, na przykład:

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

generuje:

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

Tyle pracuję dzięki prostemu szablonowi.

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

        }
    })

Jednak kiedy dodam bardziej zaawansowaną funkcjonalność, utknęłam.

Jak mogę obsługiwać wartości domyślne w szablonie?

Chciałbym ujawnić parametr „type” jako opcjonalny atrybut w mojej dyrektywie, np .:

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

Jeśli jednak nic nie zostanie określone, chcę domyślnie "text". Jak mogę to wesprzeć?

Jak mogę dostosować szablon na podstawie obecności / braku atrybutów?

Chciałbym również móc obsługiwać atrybut „wymagany”, jeśli jest obecny. Na przykład:

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

Jeśli requiredjest obecny w dyrektywie, chciałbym dodać go do wygenerowanego <input />wyniku i zignorować w przeciwnym razie. Nie jestem pewien, jak to osiągnąć.

Podejrzewam, że te wymagania mogły wyjść poza prosty szablon i muszę zacząć korzystać z faz prekompilacji, ale nie wiem, od czego zacząć.

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

Próbowałem skorzystać z rozwiązania zaproponowanego przez Misko, ale w mojej sytuacji niektóre atrybuty, które musiały zostać włączone do mojego szablonu html, same były dyrektywami.

Niestety, nie wszystkie dyrektywy, do których odwołuje się wynikowy szablon, działały poprawnie. Nie miałem wystarczająco dużo czasu, aby zagłębić się w kod kątowy i znaleźć główną przyczynę, ale znalazłem obejście, które może być potencjalnie pomocne.

Rozwiązaniem było przeniesienie kodu, który tworzy szablon html, z kompilacji do funkcji szablonu. Przykład na podstawie kodu z góry:

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

Powyższe odpowiedzi niestety nie do końca działają. W szczególności etap kompilacji nie ma dostępu do zakresu, więc nie można dostosowywać pola na podstawie atrybutów dynamicznych. Wydaje się, że użycie etapu linkowania zapewnia największą elastyczność (pod względem asynchronicznego tworzenia domeny itp.) Poniższe podejście rozwiązuje następujące kwestie:

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

Utworzyłem GIST z bardziej kompletny kod i writeup podejścia.

Oto, czego ostatecznie użyłem.

Jestem bardzo nowy w AngularJS, więc chciałbym zobaczyć lepsze / alternatywne rozwiązania.

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

Przykładowe użycie:

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