Как получить родительский элемент внутри ng-include при повторении в ng-repeat рекурсивно

Ответ 1

ng-repeat создает новую область для каждого элемента.
ng-include также создает новую область.

Когда вы используете ng-include вместе с ng-repeat, для каждого элемента создано 2 области:

• Область, созданная ng-repeat для текущего элемента. Эта область содержит текущий элемент в итерации.
• Область содержимого, созданная ng-include, которая наследует из ng-repeat созданной области.

Свойство $parent текущей области действия позволяет вам получить доступ к его родительской области.

По существу, область, созданная ng-include, пуста, когда вы получаете доступ к value и key в node.html, она фактически получает доступ к унаследованным значениям из родительской области, созданной ng-repeat.

В node.html доступ к {{value}} фактически совпадает с {{$parent.value}}. Поэтому, если вам нужно получить доступ к родительскому элементу текущего элемента, вам нужно сделать еще один шаг, обратившись к {{$parent.$parent.value}}

Этот DEMO прояснит ситуацию:

    <script type="text/ng-template" id="node.html">
        <div>
            Current: key = {{key}}, value = {{value}}
        </div>
        <div>
            Current (using $parent): key = {{$parent.key}}, value = {{$parent.value}}
        </div>
         <div>
             Parent: key = {{$parent.$parent.key}}, value = {{$parent.$parent.value}}, isArray: {{isArray($parent.$parent.value)}}
        </div>
        <ul ng-if="isObject(value)"> //only iterate over object to avoid problems when iterating a string
<li ng-repeat="(key,value) in value" ng-include="'node.html'"></li>            
        </ul>
    </script>

Если вам нужно упростить доступ к родительскому элементу, вы можете попробовать инициализировать родителя, используя onload of ng-include. Вот так:

На верхнем уровне нет ng-if = > только 2 уровня глубины

<ul>
    <li ng-repeat="(key,value) in json" 
     ng-include="'node.html'" onload="parent=$parent.$parent"></li>
</ul>

На ваших суб-уровнях существует ng-if = > 3 уровня:

    <ul ng-if="isObject(value)">
        <li ng-repeat="(key,value) in value" 
ng-include="'node.html'" onload="parent=$parent.$parent.$parent"></li>            
    </ul>

Внутри шаблона вы можете получить доступ к родительскому элементу, используя parent, grandparent с помощью parent.parent и т.д.

DEMO

Ответ 2

Я бы держался подальше от Angular $parent и всего $scope создания и наследования безумия. Вам нужно сохранить ссылку на родительский объект, не обнаружив, сколько областей находится между ng-include и ng-repeat и жонглирование с помощью $parent.$parent. Мое предложение состоит в том, чтобы явно сохранять ссылки в значения, которые вас интересуют, просто реализуйте их самостоятельно с помощью настраиваемой логики. Например, если вы хотите выставить значение из родительского ng-repeat для дочернего ng-repeat

<!-- Explictly save the value into the parent var -->
<div ng-init="parent = value">
  <!-- Save parent reference and
       update the parent var to point to the new value -->
  <div ng-repeat="(k,value) in value"
       ng-init="value._parent = parent; parent = value;"> 
    <div ng-repeat="(k,value) in value"
         ng-init="value._parent = parent">
      <button ng-click="doSomething(value)"></button>
    </div>
  </div>
</div>

Затем в вашем javascript-коде вы можете рекурсивно получить доступ ко всем родителям

function doSomething(value){
  parent1 = value._parent;
  parent2 = parent1._parent;
}

Тот же код с ng-include

<div ng-init="parent = value">
  <div ng-repeat="(key,value) in value"
       ng-init="value._parent = parent; parent = value;"
       ng-include="'node.html'">
  </div>
</div>

<script type="text/ng-template" id="node.html">
  <div ng-if="!isLeaf(value)"
       ng-repeat="(key,value) in value"
       ng-init="value._parent = parent; parent = value;"
       ng-include="'node.html'"> 

  <button ng-if="isLeaf(value)" ng-click="doSomething(value)"></button>
</script>