Pregunta Directiva de fila de tabla angular que no se procesa dentro de la tabla


Estoy tratando de agregar una directiva de fila "isrcrow" a una tabla de la siguiente manera:

<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>

Aquí está la directiva:

(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);

El problema que estoy experimentando es que la directiva isrcrow no se procesa dentro del cuerpo de la tabla. Se representa afuera y arriba de la mesa:

¿Alguien sabe qué podría estar causando este comportamiento?


32
2018-02-26 01:47


origen


Respuestas:


Agregué un resumen de mis comentarios como una respuesta ya que parecía haber ayudado al OP. :-)

Como GregL señala, omitiendo replace: true en una directiva con restrict: 'E' y <tr> ya que el nodo de plantilla raíz dará como resultado un marcado no válido, dando lugar a la representación incorrecta de la fila.

Sin embargo, para aquellos que usan una versión de Angular antes de 1.2.13 (transclusión romántica), esta solución no será aplicable debido a un problema eso ha sido notado

Un cambio sería utilizar la directiva como un atributo (es decir, restrict: 'A') y modificar apropiadamente la plantilla de forma que <tr> ya no es el nodo de la plantilla raíz. Esto permitira replace: true para ser utilizado.


30
2018-02-28 06:59



Supongo que esto es porque no has especificado replace: true Para el isrcrow directiva. Como resultado, el marcado final se vería así:

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

Que será un hijo directo de un <tbody>, cual es marcado no válido. Como resultado, la mayoría de los navegadores modernos (por ejemplo, Chrome, y también Firefox, creo) intentarán "arreglar" su marcado para que sea válido moviendo el <isrcrow> etiqueta fuera de la mesa.

En cambio, si agrega replace: true a su especificación de directiva, el <isrcrow> el elemento no se representará y el navegador solo verá el marcado válido y no intentará "corregirlo".


7
2018-02-26 02:21



Las respuestas anteriores son correctas, pero las encontré un poco difíciles de entender / aplicar, así que resumí cómo las resolví con su ayuda:

La mesa

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

La plantilla directiva de isrcow (sin tr, sin raíz única)

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

La directiva isrcrow con

restrict: 'A'
replace: false

El resultado final es

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

0
2018-06-22 10:10