Настройка шаблона в директиве

У меня есть форма, которая использует разметку из 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>'

        }
    })

Однако, когда я прихожу, чтобы добавить более продвинутые функциональные возможности, я застреваю.

How can I support default values in the template?

Я хотел бы раскрыть "тип" параметр в качестве необязательного атрибута в моей директиве, например:

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

Однако, если ничего не указано, я бы хотел по умолчанию"text", Как я могу поддержать это?

How can I customize the template based on the presence / absence of attributes?

Я также хотел бы иметь возможность поддерживать "требуемый" атрибут, если он присутствует. Например:

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

Еслиrequired присутствует в директиве, я хотел бы добавить ее к сгенерированному<input /> в выводе, и игнорировать это в противном случае. Я не уверен, как этого добиться.

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

Ответы на вопрос(4)

предложенное Миско, но в моей ситуации некоторые атрибуты, которые нужно было объединить с моим шаблоном 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
        }
    }
})
 joshcomley06 авг. 2014 г., 02:00
Это решило мою проблему с помощью встроенного ng-клика в шаблоне
 CJ Ramki03 апр. 2015 г., 09:57
Спасибо .. просто я написал функцию в шаблоне и вернул нужный шаблон html ..
 jose.angel.jimenez08 июн. 2016 г., 14:16
Это не обходной путь. Это правильный ответ на ФП. Условное создание шаблона в зависимости от атрибутов элемента - это точное назначение функции шаблона директивы / компонента. Вы не должны использовать компиляцию для этого. Команда Angular активно поощряет этот стиль кодирования (без использования функции компиляции).
 Jon Snow02 июн. 2015 г., 13:41
Спасибо, я даже не знал, что шаблон принял функцию!
 martinoss03 мар. 2015 г., 11:16
Спасибо, это сработало и для меня. Хотел обернуть директиву, чтобы применить некоторые атрибуты по умолчанию.
Решение Вопроса
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);
        }
    };
})
 jclancy05 июл. 2013 г., 01:23
Это немного поздно, но если вhtmlText вы добавилиng-click где-то, единственной модификацией будет заменаelement.replaceWith(htmlText) сelement.replaceWith($compile(htmlText))?
 Syam29 авг. 2013 г., 04:04
@ Misko, ты упомянул, чтобы избавиться от области видимости. Зачем? У меня есть директива, которая не компилируется при использовании с изолированной областью действия.
 Alp06 февр. 2014 г., 18:59
это не работает, еслиhtmlText содержит директиву ng-transclude
 m.e.conroy24 мар. 2014 г., 16:08
К сожалению, я обнаружил, что проверка формы не работает с этим,$errorлаги @ на вставленном входе никогда не устанавливаются. Я должен был сделать это в свойстве ссылки директивы:$compile(htmlText)(scope,function(_el){ element.replaceWith(_el); }); для того, чтобы контроллер формы мог распознать вновь созданное существование и включить его в проверку. Я не мог заставить его работать в свойстве компиляции директивы.
 incarnate28 апр. 2015 г., 21:58
Ладно, сейчас 2015 год, и я уверен, что что-то ужасно неправильно в генерации разметки в скриптахвручну.

к сожалению, не совсем работают. В частности, этап компиляции не имеет доступа к области, поэтому вы не можете настроить поле на основе динамических атрибутов. Использование этапа связывания обеспечивает наибольшую гибкость (с точки зрения асинхронного создания dom и т. Д.). Приведенный ниже подход учитывает следующе

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

Я создал суть с более полным кодом изаписат подхода.

 Michiel22 сент. 2015 г., 11:07
Очень мило спасибо! К сожалению, ваш письменный подход не в сети:
 binki13 июл. 2018 г., 19:36
Обе суть и рецензия - мертвые ссылки.
 Jupo08 янв. 2014 г., 14:34
Спасибо за это, у меня это сработало.
 Alp06 февр. 2014 г., 19:01
хороший подход. к сожалению, при использовании с ngTransclude я получаю следующую ошибку:Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found.
 IttayD03 февр. 2015 г., 22:29
и почему бы не использовать изолированную область с 'field: "="'?

Я очень плохо знаком с 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>
 Mark Rajcok12 сент. 2012 г., 04:27
Я думаю, что это ответ от Docs.angularjs.org / руководство / директивы: «Любая операция, которая может совместно использоваться экземпляром директив [например, преобразование DOM шаблона], должна быть перемещена в функцию компиляции из соображений производительности.»
 Misko Hevery18 мая 2012 г., 06:34
Лучшее решение: (1) использовать функцию компиляции вместо функции связывания и выполнить замену там. Шаблон не будет работать в вашем случае, так как вы хотите настроить его. (2) избавиться от области видимости:
 Jonathan Wilson18 июн. 2013 г., 07:05
@ Marty Вы все еще можете привязать один из ваших пользовательских входов к модели? (то есть.<form-input ng-model="appName" label="Application Name" form-id="appName" required/></form-input>)
 Marty Pitt07 июн. 2012 г., 14:27
@ MiskoHevery Спасибо за отзыв - не могли бы вы объяснить, почему функция компиляции предпочтительнее функции ссылки здесь?
 Julian28 авг. 2013 г., 03:49
@ MartyPitt Из книги AngularJS О'Рейли: «Итак, у нас естьcompileаза @, которая занимается преобразованием шаблона, иlink фаза, которая имеет дело с изменением данных в представлении. Вдоль этих линий основное различие междуcompile а такжеlink функции в директивах это то, чтоcompileункции @ имеют дело с преобразованием самого шаблона, аlinkункции @ имеют дело с созданием динамической связи между моделью и представлением. Именно на этом втором этапе области присоединяются к скомпилированномуlink функционирует, и директива становитсяпрямой эфи через привязку данных "

Ваш ответ на вопрос