1

есть директива:

<div>
  <form class="form-inline">
    <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" ng-model="user.name">
    </div>
    <div class="form-group">
      <label>Email</label>
      <input type="email" class="form-control" ng-model="user.email">
    </div>
    <div class="form-group">
      <label>Address</label>
      <input type="email" class="form-control" ng-model="user.address">
    </div>
    <div class="form-group">
      <label>Phone</label>
      <input type="number" class="form-control" ng-model="user.phone">
    </div>
    <div class="form-group">
      <label>City</label>
      <input type="number" class="form-control" ng-model="user.city">
    </div>
    <div class="form-group">
      <label>Street</label>
      <input type="number" class="form-control" ng-model="user.street">
    </div>
    <button type="submit" class="btn btn-default" ng-click="UserListCtrl.addUser();">Create User</button>
  </form>

  <table class="table" class="user-list" ng-if="UserListCtrl.users.length">
    <caption>Users</caption>

    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Street</th>
        <th>Sity</th>
        <th>State</th>
      </tr>
    </thead>

    <tbody>
      <user-item ng-repeat="user in UserListCtrl.users" user="user"></user-item>
    </tbody>

  </table>
</div>

В ней есть еще одна директива <user-item ng-repeat="user in UserListCtrl.users" user="user"></user-item>

Когда пользователь добавляется, то из верстки понятно что должно добавить элементы в table>tbody

<tr>
  <th scope="row">{{ UserItemCtrl.user.index }}</th>
  <td>{{ UserItemCtrl.user.name }}</td>
  <td>{{ UserItemCtrl.user.email }}</td>
  <td>{{ UserItemCtrl.user.phone }}</td>
  <td>{{ UserItemCtrl.user.street }}</td>
  <td>{{ UserItemCtrl.user.city }}</td>
  <td>{{ UserItemCtrl.user.state }}</td>
</tr>

Но когда добавляю angular добавляет под тег form вместо table>tbody

введите сюда описание изображения

5
  • вот почему не стоит выносить в директиву только часть стандартного элемента
    – Grundy
    30 авг 2016 в 14:40
  • это особенность обработки некорректных элементов внутри тега table. Которая так же может зависеть от браузера
    – Grundy
    30 авг 2016 в 14:41
  • 1
    проблема решится если использовать директиву не как элемент а как атрибут <tr user-item ng-repeat="user in UserListCtrl.users" user="user"></tr>
    – Grundy
    30 авг 2016 в 14:43
  • @Grundy спасибо 30 авг 2016 в 14:46
  • вот точно помню, что отвечал на подобный вопрос, но найти не могу
    – Grundy
    30 авг 2016 в 14:47

1 ответ 1

2

Проблема заключается в том, как браузер обрабатывает наличие недопустимого вложенного элемента.

В элемент tbody разрешено вкладывать только элементы tr. Если вместо tr будет что-то другое, то результат может зависеть от браузера

  • может быть нормальное поведение
  • недопустимый элемент может быть вынесен из таблицы вверх или вниз
  • что-нибудь еще.

Так как в примере в tbody добавляется элемент user-item, то хром в данном случае выносит этот элемент перед таблицей, затем отрабатывает код ангуляра и элемент заменяется на элемент tr.

Чтобы избежать выноса, нужно использовать user-item не в виде элемента, а в виде атрибута

<tr user-item ng-repeat="user in UserListCtrl.users" user="user"></tr>

В этом случае внутри tbody находится разрешенный tr и выноса не происходит.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.