Угловая директива вставляет неправильный узел DOM

Question

У меня есть приложение со многими формами. Каждое поле имеет несколько HTML-элементов, поэтому я подумал, что могу извлечь некоторые директивы (по одному для каждого типа поля), чтобы мои формы были аккуратными.

Я создал sample app, чтобы продемонстрировать проблему, но я получаю противоречивое поведение. В примере приложения элемент <link /> заменяет <input />. В моем реальном приложении <input /> просто удаляется из DOM полностью. Я чувствую, что это должно быть легко; почему он не работает?

Answer 1

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

Это, вероятно, что вы ищете:

<div class="form-group" > 
    <label for="{{htmlId}}" ng-transclude></label> 
    <input id="{{htmlId}}" class="form-control" type="text" ng-model="model" /> 
    <span ng-repeat="error in errors">{{error}}</span> 
</div> 

Я переместил tranclusion в этикетку. Хотя это и работает, я бы также рекомендовал стиль фактического пропускания атрибута label, а не его переключение, только для того, чтобы иметь согласованный API и более простой код; это функционально эквивалентно, хотя, так что не позволяйте мне запугивать вас.

Также у вас есть несколько ошибок в вашем .js. Во-первых, вы хотите использовать = в Вашей области вместо &

scope: { 
    model: '=', 
    errors: '=' 
}, 

& используется для передачи методов, в то время как = используется для объектов (это упрощение). Поскольку ваши model и errors являются объектами, вместо этого вы хотите использовать =.

Наконец, в вашем примере ваш шаблон html и шаблон вашей директивы не имеют того же имени ... у вас есть дополнительные 's' в вашем .js, но это, вероятно, только в плункере, а не ваше настоящее приложение.