AngularJS ng-repeat 與表中的自定義元素呈現奇怪

問題描述

我正在嘗試 re-use 在多個地方我的 HTML 視圖的一部分。我想要 re-use 的部分是 HTML 表格中的表格單元格。問題是我的 ng-repeat 中的自定義指令正在做有趣的事情。我已經複製了 jsFiddle 的問題。 jsFiddle 中有兩個 HTML 表。第一個是 ng-repeat，其中表單元素寫入視圖，第二個是來自指令 my-element 的表格單元格。 Chrome 開發工具會報告渲染的 HTML 格式如下。請注意，自定義元素僅顯示一次，並且位於表外。

渲染 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 是一個簡單的例子，常識將導致根本不使用指令。但是，我的目標代碼有一個更大的模板，我想要 re-use 。我也試過使用”ng-include”，但結果是類似的。

最佳解決辦法

已知<td> 在這樣的指令中表現得很奇怪。而是在父<tr> 上使用指令。在這裏閲讀更多關於這個問題：https://github.com/angular/angular.js/issues/1459

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

這是您如何進一步改進您的指令，以便它是更多的 re-usable 。

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>

Live Demo

次佳解決辦法

將指令應用於<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> 將被替換為模板中的根項目<td>，因此這不會混淆 HTML 。

參考文獻

AngularJS ng-repeat with custom element inside a table is rendering strangely

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

AngularJS ng-repeat 與表中的自定義元素呈現奇怪