테이블 내에 커스텀 요소가 있는 AngularJs ng-repeat이 이상하게 렌더링됩니다.

테이블 내에 커스텀 요소가 있는 AngularJs ng-repeat이 이상하게 렌더링됩니다.

HTML 뷰의 일부를 여러 곳에서 재사용하려고 합니다.재사용하고 싶은 부분은 HTML 테이블의 테이블 셀입니다.문제는 ng-repeat 내의 커스텀 디렉티브가 재미있는 일을 하고 있다는 것입니다.jsFiddle에서 문제를 재현했습니다.jsFiddle에는 2개의 HTML 테이블이 있습니다.첫 번째는 뷰에 기재된 표 셀을 사용하여 ng-repeat하고 두 번째는 지시어 my-element에서 가져온 표 셀입니다.Chrome 개발 도구는 렌더링된 HTML이 다음과 같이 보인다고 보고합니다.커스텀 요소는 1회만 표시되며 테이블 외부에 있습니다.

렌더링된 HTML

<div ng-controller="MyCtrl" class="ng-scope">
    table1
    <table class="table table-hover">
      <tbody><!-- ngRepeat: p in people -->
          <tr ng-repeat="p in people" class="ng-scope">
            <td class="ng-binding">Name: Mike</td>
            <td class="ng-binding">Age: 20</td>
          </tr>
          <tr ng-repeat="p in people" class="ng-scope">
            <td class="ng-binding">Name: Peter S</td>
            <td class="ng-binding">Age: 22</td>
          </tr>
      </tbody>
    </table>
    <br>table2
    <my-element class="ng-binding">Name: Age: </my-element>
    <table class="table table-hover">
      <tbody>
        <!-- ngRepeat: p in people -->
        <tr ng-repeat="p in people" class="ng-scope">
        </tr>
        <tr ng-repeat="p in people" class="ng-scope">    
        </tr>
      </tbody>
    </table>
</div>

소스 HTML

<div ng-controller="MyCtrl">
    table1
    <table class="table table-hover">
        <tr ng-repeat="p in people">
            <td>Name: {{ p.name }}</td>
            <td>Age: {{ p.age }}</td>
        </tr>
    </table>
    <br/>table2
    <table class="table table-hover">
        <tr ng-repeat="p in people">
            <my-element></my-element>
        </tr>
    </table>
</div>

소스 JS

var app = angular.module('myApp', []);

app.directive('myElement', function () {
    return {
        restrict: 'E',
        template: '<td>Name: {{ p.name }}</td><td>Age: {{ p.age }}</td>'
    }
});

function MyCtrl($scope) {
    $scope.people = [{
        name: 'Mike',
        age: 20
    }, {
        name: 'Peter S',
        age: 22
    }];
}

jsFiddle은 사소한 예이며 상식적으로 디렉티브를 전혀 사용하지 않을 수 있습니다.단, 타겟코드에 더 큰 템플릿이 있어 재사용하고 싶습니다.저도 'ng-include'를 써봤는데 결과는 비슷해요.

<td>이런 지시에서는 이상하게 행동한다고 알려져 있습니다.대신 부모 명령어를 사용합니다.<tr>이 문제에 대한 자세한 내용은 https://github.com/angular/angular.js/issues/1459를 참조하십시오.

<table>
    <tr ng-repeat="p in people" my-element></tr>
</table>

다음은 지침을 더욱 개선하여 재사용할 수 있도록 하는 방법입니다.

app.directive('myElement', function () {
  return {
    scope: {
      item: '=myElement'
    },
    restrict: 'EA',
    template: '<td>Name: {{item.name}}</td><td>Age: {{item.age}}</td>'
    };
});

의 가치를 전달하다item다음과 같이 합니다.

  <table>
    <tr ng-repeat="person in people" my-element="person"></tr>
  </table>

라이브 데모

지시문 적용 대상<tr>다음과 같습니다.

<table class="table table-hover">
    <tr my-element blah='p' ng-repeat="p in people"></tr>
</table>

app.directive('myElement', function () {
    return {
        restrict: 'A',
        scope:{
            ngModel: '=blah'
        },
        template: '<td>Name: {{ ngModel.name }}</td><td>Age: {{ ngModel.age }}</td>'
    }
});

Working Demo

사용하다replace: true당신의 지시와 당신의 명령과 명령에서<my-element>템플릿의 루트 항목인 a로 대체됩니다.<td>HTML을 혼동하지 않도록 합니다.

언급URL : https://stackoverflow.com/questions/18600710/angularjs-ng-repeat-with-custom-element-inside-a-table-is-rendering-strangely