각도 테이블 행 지시문이 테이블 내부에 렌더링되지 않음

각도 테이블 행 지시문이 테이블 내부에 렌더링되지 않음

다음과 같이 테이블에 "isrcrow" 행을 추가하려고 합니다.

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

지시사항은 다음과 같습니다.

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

제가 겪고 있는 문제는 isrcrow 지시문이 테이블 본문 안에 렌더링되지 않는다는 것입니다.테이블 외부 및 위에 렌더링:

이 행동의 원인이 무엇인지 아는 사람 있나요?

OP에 도움이 될 것 같았기 때문에 답변으로 코멘트 요약을 추가. :-)

GregL이 지적했듯이replace: true지시대로restrict: 'E'그리고.<tr>루트 템플릿노드가 비활성화되어 행의 렌더링이 잘못되기 때문입니다.

그러나 1.2.13 이전 버전의 Angular(로맨틱-트랜스루전)를 사용하는 경우에는 지적된 문제로 인해 이 솔루션이 적용되지 않습니다.

회피책은 대신 지시문을 속성으로 사용하는 것입니다(즉,restrict: 'A'템플릿을 적절히 수정하여<tr>는 루트 템플릿노드가 아닙니다.이렇게 하면replace: true사용할 수 있습니다.

내 생각에 이건 당신이 그 이유를 정확히 밝히지 않았기 때문인 것 같아.replace: true를 위해isrcrow지시.그 결과 최종 마크업은 다음과 같습니다.

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

어느쪽이 직계 존속인지<tbody>유효하지 않은 마크업입니다.그 결과, 대부분의 최신 브라우저(예: Chrome, Firefox, 제 생각에는 Firefox 등)는 유효한 마크업을 "수정"하려고 합니다.<isrcrow>테이블 밖에 태그를 붙입니다.

대신에,replace: true고객님의 지시 사양에 따라<isrcrow>요소는 렌더링되지 않으며 브라우저에는 유효한 마크업만 표시되며 "수정"을 시도하지 않습니다.

앞의 답변은 맞지만, 조금 이해하기 어렵고 적용하기 어려웠기 때문에 도움을 받아 문제를 해결한 방법을 정리했습니다.

테이블

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

isrcow 디렉티브템플릿(tr 없음, 단일 루트 없음)

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

isrcrow 명령어는

restrict: 'A'
replace: false

최종 결과는

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

언급URL : https://stackoverflow.com/questions/22030080/angular-table-row-directive-not-rendering-inside-table