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 и выноса не происходит.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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