Pertanyaan Arahan baris meja sudut tidak merender di dalam tabel


Saya mencoba menambahkan baris "isrcrow" direktif ke tabel sebagai berikut:

<table class="table">
        <thead><tr>
                   <th>Artist Name</th>
                   <th>Track Title</th>
                   <th>Version</th>
                   <th>Track Duration</th>
                   <th>Recording Year</th>
                   <th></th>
               </tr>
        </thead>
        <tbody>
            <isrcrow></isrcrow>
        </tbody>       

    </table>

Berikut ini arahannya:

(function() {
  var isrcorderapp;

  isrcorderapp = angular.module("isrcorderapp", []);

  isrcorderapp.controller("isrcordercontroller", function($scope, $http) {
    return $scope.recordingTypes = [
      {
        type: 'Single'
      }, {
        type: 'Album'
      }, {
        type: 'Live'
      }, {
        type: 'Concert'
      }, {
        type: 'Instrumental'
      }
    ];
  });

  isrcorderapp.directive("isrcrow", function() {
    return {
      restrict: 'E',
      template: '<tr>\
                <td><input id="artist" ng-model="name"/></td>\
                <td><input id="track"/></td>\
                <td><select id="isrctype" ng-model="isrctype" ng-change="setState(state)" ng-options="s.type for s in recordingTypes" class="ng-pristine ng-valid"></select></td>\
                <td><input id="duration"/></td>\
                <td><input id="year"/></td>\
                <td><input type="button" value="Add ISRC" onclick="AddIsrc()" class="btn btn-small btn-success" />\
                    <input type="button" value="Delete" onclick="RemoveIsrc()" class="btn btn-small btn-danger" />\
                </td>\
            </tr>',
      scope: {
        name: '='
      },
      link: function(scope, element, attr) {}
    };
  });

}).call(this);

Masalahnya saya sedang mengalami adalah arahan isrcrow tidak membuat di dalam tubuh tabel. Yang diberikan di luar dan di atas meja:

Apakah ada yang tahu apa yang menyebabkan perilaku ini?


32
2018-02-26 01:47


asal


Jawaban:


Menambahkan ringkasan komentar saya sebagai jawaban karena tampaknya telah membantu OP. :-)

Sebagai GregL menunjukkan, menghilangkan replace: true dalam arahan dengan restrict: 'E' dan <tr> sebagai simpul template root akan menghasilkan markup yang tidak valid, sehingga menimbulkan perenderan yang salah dari baris.

Namun, bagi mereka yang menggunakan versi Angular sebelum 1.2.13 (romantis-transklusi), solusi ini tidak akan berlaku karena suatu isu yang telah dicatat.

Pekerjaan di sekitar adalah dengan menggunakan direktif sebagai atribut (yaitu restrict: 'A') dan dengan tepat memodifikasi templat seperti itu <tr> bukan lagi simpul template root. Ini akan memungkinkan replace: true untuk digunakan.


30
2018-02-28 06:59



Saya akan menebak bahwa ini karena Anda belum ditentukan replace: true Untuk isrcrow direktif. Akibatnya, markup akhir akan terlihat seperti:

<isrcrow>
    <tr>
        <td>...</td>
        ...
        <td>...</td>
    </tr>
</isrcrow>

Yang akan menjadi anak langsung dari a <tbody>, yang mana markup tidak valid. Akibatnya, sebagian besar browser modern (misalnya Chrome, dan juga Firefox, saya yakin) akan mencoba "memperbaiki" markup Anda agar valid dengan memindahkan <isrcrow> tag di luar tabel.

Sebaliknya, jika Anda menambahkan replace: true untuk spesifikasi direktif Anda, <isrcrow> elemen tidak akan ditampilkan, dan browser hanya akan melihat markup yang valid dan tidak mencoba untuk "memperbaikinya".


7
2018-02-26 02:21



Jawaban sebelumnya benar, tetapi saya menemukan mereka agak sulit untuk dipahami / diterapkan, jadi rangkum cara saya memecahkannya dengan bantuan mereka:

Meja

<tbody>
    <tr isrcrow ng-repeat="..."></tr>
</tbody>

The directive template isrcow (tanpa tr, tidak ada root tunggal)

<td></td>
<td></td>
...

Arahan isrcrow dengan

restrict: 'A'
replace: false

Hasil akhirnya adalah

<tbody>
     <tr isrcrow>
         <td></td>
         <td></td>
         ...
     </tr>
     <tr isrcrow>
         <td></td>
         <td></td>
         ...
     </tr>
     ...
</tbody>

0
2018-06-22 10:10