Почему вложенный ng-repeat не работает должным образом для тега h1?

За h1 тег вложенный ng-repeat не работает нормально.

Я знаю, что мы можем получить доступ к родительским данным во вложенных ng-repeat с помощью $parent, Но это не работает для меня.

Если я заменю h1 с div тогда это работает нормально.

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>

Источник

2 ответа

Решение

H1 не может быть вложенным. Angular делает это правильно, но браузер закрывает теги слишком рано. Вот плункер без H1s и вложенный.

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

Источник

angular будет отображать разные ng-повторы для каждого тега H1. так согласно вашим данным 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>

поэтому мы не можем получить доступ к области братьев и сестер.

Источник
Другие вопросы по тегам