Угловая директива, включающая <tr>, создает "режим вуду?" - PullRequest
Новая
       7

Угловая директива, включающая <tr>, создает "режим вуду?"

0 голосов
/ 24 июня 2018

У меня есть директива, которая создает строку в таблице, которая выглядит примерно так: 

angular.module("myApp").directive('personRow', function() {
  return {
    template: "<tr><td>{{person.name}}</td><td>{{person.age}}</td></tr>"
  }
});

Однако, когда я пытаюсь использовать эту директиву с ng-repeat над коллекцией, я получаю очень странные результаты - вот на моей странице: 

  <div ng-app="myApp" ng-controller="myCtrl">
    <p>Looping wirth ng-repeat:</p>
    <table>
      <tr><td>foo</td></tr>
      <person-row ng-repeat="person in people"></person-row>
      <tr></tr>
   </table>
  </div>

Вот вывод: 

Looping with ng-repeat:

John32Mary45
foo

Кажется, что все элементы таблицы были перемещены после директивы, и поверх нее, так или иначе, строка "foo", которая предшествует директиве, также перемещается после нее.

Сгенерированный HTML на странице выглядит так: 

<div ng-app="myApp" ng-controller="myCtrl" class="ng-scope">
  <p>Looping wirth ng-repeat:</p>
  <!-- ngRepeat: person in people --><person-row ng-repeat="person in people" class="ng-binding ng-scope">John32</person-row><!-- end ngRepeat: person in people --><person-row ng-repeat="person in people" class="ng-binding ng-scope">Mary45</person-row><!-- end ngRepeat: person in people --><table>
    <tbody><tr><td>foo</td></tr>

    <tr></tr>
   </tbody></table>
</div>

Не могу понять, что здесь происходит ...

Вот плункер с полным кодом, который генерирует это: https://plnkr.co/edit/ia2Um68YF4OzWWsiIGKL?p=info

1 Ответ

0 голосов
/ 24 июня 2018

Немного больше исследований и выяснилось, что эту проблему можно решить, используя директиву в качестве атрибута элемента tr вместо включения tr в директиву, т. Е. Используйте 

 <tr person-row>..</tr>

вместо 

 <person-row></person-row>
...