为什么嵌套的 ng-repeat 不能正常用于 h1 标签？

Question

对于 h1 标签嵌套 ng-repeat 不能正常工作。

我知道我们可以使用 $parent 访问嵌套 ng-repeat 中的父数据。但这对我不起作用。

如果我用 div 替换 h1 那么这就可以正常工作了。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "Alfreds Futterkiste",
    "Ernst Handel",
  ]
  $scope.records2 = [
    "Alfreds Futterkiste2",
    "Ernst Handel2",
  ]
  $scope.records3 = [
    "Alfreds Futterkiste3",
    "Ernst Handel3",
  ]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <div ng-app="myApp" ng-controller="myCtrl">
  <h1 ng-repeat="x in records">
    <h1 ng-repeat="y in records2">
      <span>{{$parent.x}}</span>
      <h1 ng-repeat="z in records3"></h1>
    </h1>
  </h1>
<div>

Answer 1

H1 不能嵌套。 Angular 生成正确，但浏览器关闭标签的时间过早。这是没有 H1 和嵌套的 plunker。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
      var vm = this;
      vm.records = [
        "Alfreds Futterkiste",
        "Ernst Handel",
      ]
      vm.records2 = [
        "Alfreds Futterkiste2",
        "Ernst Handel2",
      ]
      vm.records3 = [
        "Alfreds Futterkiste3",
        "Ernst Handel3",
      ]
    });
  </script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl as vm">
    <div ng-repeat="x in vm.records">
      - <span>{{x}}</span>
      <div ng-repeat="y in vm.records2">
        --<span>{{y}}</span>
        <div ng-repeat="z in vm.records3">
          --- <span>{{z}}</span>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

https://plnkr.co/edit/4f4Ef0V2YGCkZkv49bHl?p=info

Answer 2

angular 将在每个 H1 标签上呈现不同的 ng-repeat。所以根据你的数据 dom 渲染成这样

<h1 ng-repeat="x in records" class="ng-binding ng-scope"></h1>
<h1 ng-repeat="x in records" class="ng-binding ng-scope"></h1>
<h1 ng-repeat="y in records2" class="ng-scope"><span class="ng-binding"></span></h1>
<h1 ng-repeat="y in records2" class="ng-scope"><span class="ng-binding"></span></h1>
<h1 ng-repeat="z in records3" class="ng-scope"></h1>
<h1 ng-repeat="z in records3" class="ng-scope"></h1>

所以我们无法访问兄弟范围。

为什么嵌套的 ng-repeat 不能正常用于 h1 标签？

Why nested ng-repeat is not working properly for h1 tag?

angularjs

angularjs-ng-repeat