表格内带有自定义元素的 AngularJS ng-repeat 呈现奇怪 [英] AngularJS ng-repeat with custom element inside a table is rendering strangely

问题描述

我正在尝试在多个地方重复使用我的 HTML 视图的一部分.我想重用的部分是 HTML 表格中的表格单元格.问题是我在 ng-repeat 中的自定义指令正在做一些有趣的事情.我在 jsFiddle 上重现了这个问题.jsFiddle 中有两个 HTML 表.第一个是 ng-repeat，表格单元格写在视图中，第二个是来自指令 my-element 的表格单元格.Chrome 开发工具报告呈现的 HTML 如下所示.请注意，自定义元素仅出现一次且位于表格之外.

呈现的 HTML

表格1<table class="table table-hover"><tbody><!-- ngRepeat: p in people --><tr ng-repeat="p in people" class="ng-scope"><td class="ng-binding">姓名:迈克</td><td class="ng-binding">年龄:20</td></tr><tr ng-repeat="p in people" class="ng-scope"><td class="ng-binding">姓名:Peter S</td><td class="ng-binding">年龄:22</td></tr></tbody><br>table2<my-element class="ng-binding">姓名:年龄:</my-element><table class="table table-hover"><!-- 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>

源 HTML

表格1<table class="table table-hover"><tr ng-repeat="p in people"><td>名称:{{ p.name }}</td><td>年龄:{{ p.age }}</td></tr><br/>table2<table class="table table-hover"><tr ng-repeat="p in people"><我的元素></我的元素></tr>

源代码

var app = angular.module('myApp', []);app.directive('myElement', function () {返回 {限制:'E'，模板:'<td>名称:{{ p.name }}</td><td>年龄:{{ p.age }}</td>'}});函数 MyCtrl($scope) {$scope.people = [{姓名:'迈克',年龄:20}, {名称:'彼得S'，年龄:22}];}

请注意 jsFiddle 是一个微不足道的例子，常识会导致根本不使用指令.但是，我的目标代码有一个更大的模板，我想重用它.我也试过使用ng-include"，但结果是相似的.

解决方案

<td> 在这样的指令中会表现得很奇怪.相反，在父 上使用指令.在此处阅读有关此问题的更多信息:https://github.com/angular/angular.js/问题/1459

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

您可以通过以下方式进一步改进指令，使其更具可重用性.

app.directive('myElement', function () {返回 {范围: {项目:'=我的元素'},限制:'EA'，模板:'<td>名称:{{item.name}}</td><td>年龄:{{item.age}}</td>'};});

并像这样传入item的值:

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

现场演示

I'm trying to re-use a portion of my HTML view in multiple places. The portion I want to re-use is table cells in an HTML table. The problem is that my custom directive inside a ng-repeat is doing funny things. I have reproduced the problem on jsFiddle. There are two HTML tables in the jsFiddle. The first is ng-repeat with the table cells written in the view and the second is the table cells coming from a directive, my-element. Chrome dev tools report that the rendered HTML looks like this. Note that the custom element appears only once and is outside the table.

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

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

Source 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
    }];
}

Please note the jsFiddle is a trivial example and common sense would lead to just not using directives at all. However, my target code has a much larger template that I want to re-use. I've tried using "ng-include" as well but the result is similar.

解决方案

<td> is known to behave strangely in directives like this. Instead, use a directive on the parent <tr>. Read more about this issue here: https://github.com/angular/angular.js/issues/1459

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

Here is how you can further improve your directive so that it is more re-usable.

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

and pass in the value of item like so:

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

Live Demo

这篇关于表格内带有自定义元素的 AngularJS ng-repeat 呈现奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！