当前位置: 首页 > 面试题库 >

表格中具有自定义元素的AngularJS ng-repeat呈现异常

鲁涵映
2023-03-14
问题内容

我试图在多个地方重用HTML视图的一部分。我要重用的部分是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是一个简单的示例,常识将导致根本不使用指令。但是,我的目标代码有一个更大的模板,我想重复使用。我也尝试过使用“ ng-
include”,但结果相似。


问题答案:

<td>众所周知,在这样的指令中,它表现得很奇怪。而是在parent上使用指令<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>

现场演示



 类似资料:
  • 问题内容: 我正在尝试自定义一个,以便为每个第4个元素添加类似标签的内容。我曾尝试搜索,但似乎找不到可靠的答案。有没有简单的方法可以为Angular这样的条件添加条件?我只是在其中添加了一些内容,但我需要在第4个元素处开始新的一行。 即我想要以下 但现在它只是这样做 如果有关于自定义的好文章(对于新手),我将非常感谢您提供的链接以及到目前为止我发现的所有内容都太难理解了。 的HTML 问题答案:

  • 我正在使用高级自定义字段为特定类别创建帖子。我使用Elementor(免费版)进行格式化,我希望使用ACF创建的所有帖子都应该显示在我的页面的特定部分下。但是,我不能这样做,因为elementor pro支持此功能,并且我不能用elementor编写php。 知道怎么做吗?

  • 所有这些都如预期的那样工作,只是一旦表显示了它的第一行,它就会每秒调用单元格呈现器大约十次...直到用户关闭表。 一旦我在其中得到大约20行,表格变得相当缓慢,需要2-8秒来调整列的大小,向上或向下scoll,或用选定的背景色呈现选定的行。 我在呈现器中插入了一个print语句,这样我就可以看到getTableCellRendererComponent方法被调用了多少次。

  • 我正在尝试使用Javascript选择此复选框 下面的代码可以工作,但并不理想 我试过这些 但它们并不起作用。有什么想法能让这件事成功吗? 数据值未硬编码的更新代码

  • 本文向大家介绍aurelia 创建具有可绑定属性的自定义元素,包括了aurelia 创建具有可绑定属性的自定义元素的使用技巧和注意事项,需要的朋友参考一下 示例 创建具有可绑定属性的自定义元素非常简单。如果要创建一个接受一个或多个插件可以使用的值的元素,则需要使用@bindable装饰器和语法。 在下面,我们正在创建一个自定义元素,该元素接受一系列水果并显示它们。 示例: my-element.j

  • 我试图在和创建一个基本的web组件 到目前为止,我已经完成了以下工作: 使用 已安装 将添加到 app.module.ts 中的数组 已创建组件,将其称为 使用以下代码将 定义为 中的自定义元素 完成所有这些操作后,运行 会给我以下错误: 中的错误。/node _ modules/@ angular/elements/fesm 2015/elements . mjs 328:49-63无法从非Ec