在NG-重复递归迭代时如何获得内部的父元素NG-包括

本文介绍了在NG-重复递归迭代时如何获得内部的父元素NG-包括的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我做了一个递归NG重复元素，并试图操纵的东西已经变成了噩梦，因为我没有提到我遍历父。

I made a recursive ng-repeat element, and trying to manipulate things has turned into a nightmare, because I don't have reference to the parent I'm iterating over.

NG的重复看起来是这样的：

The ng-repeat looks like this:

ng-repeat="(key, value) in value"

请记住这是递归的，所以在价值的每个值成为新的价值，所以我不能只用in值从NG-重复。我想做这样的事情检查，如果父母是一个数组，而$父是一些奇怪的事情，而不是当前迭代值的父元素。

Remember It's recursive, so each value in value becomes the new value, so I can't just use the "in" value from ng-repeat. I want to do such things as checking if the parent is an array, but $parent is some weird thing, not the parent element of the current iteration value.

事情我想要做的一些例子是：

Some examples of things I want to do is:

ng-show="isArray(parent)"
ng-click="delete(parent, $index)"

（为我在做什么作为工作围绕一个例子，我有一个___ISARRAYELEMENT___属性添加到我的每一个数组元素，只是知道它是在一个数组>> ;;）

(as an example of what I'm doing as a work around, I've had to add an ___ISARRAYELEMENT___ property to each of my array elements, just to know that it's in an array >.>;;)

编辑：基本上我想知道是否有在NG-重复内容的任何方便的元数据，我很想念

Basically I want to know if there is any convenient meta data in an ng-repeat context that I'm missing.

编辑：确定这里是它的全部的HTML：

Ok here is the html in it's entirety:

<html ng-app>
<head>
    <title>JSON CRUD</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <script src="angularjsoncrud.js"></script>
    <script type="text/ng-template" id="node.html">
        <button ng-click="minimized = !minimized" ng-show="!isLeaf(value)" ng-init="minimized=false" ng-class="{'glyphicon glyphicon-plus': minimized, 'glyphicon glyphicon-minus': !minimized}">-</button>
        <input ng-model="value.___KEY___" ng-if="!isArrayElement(value)" />
        <input ng-if="isLeaf(value)" ng-model="value.___VALUE___" />
        <ul ng-if="!isLeaf(value)" ng-show="!minimized">
            <li ng-repeat="(key,value) in value" ng-if="key != '___KEY___' && key != '___ISARRAY___'" ng-include="'node.html'"></li>
            <button type="button" ng-if="isArray(value)" ng-click="addToArray(value)">Add Element</button>
        </ul>
    </script>
</head>
<body ng-app="Application" ng-controller="jsoncrudctrl">
    <ul>
        <li ng-repeat="(key,value) in json" ng-include="'node.html'"></li>
    </ul>
    <pre>{{stringify(json)}}</pre>
</body>
</html>

有一件事我想要做的就是替换IsArray的（父）isArrayElement（值），因为isArrayElement依靠我添加到阵列中，我将preFER到不能添加元数据。

One thing I would like to do is replace isArrayElement(value) with isArray(parent), because isArrayElement relies on meta data I added to the array, which I would prefer to not have to add.

推荐答案

NG-重复创建每个元素的新范围。结果
NG-包括也创造了一个新的范围。

ng-repeat creates a new scope for each element.
ng-include also creates a new scope.

当您使用 NG-包括与一起NG-重复，也有每个元素创建2范围：

When you use ng-include together with ng-repeat, there are 2 scopes created for each element:

按创建范围NG-重复当前元素。这个范围包含在迭代的当前元素。

儿童范围按创建NG-包括其中继承从 NG-重复的创建范围。

Scope created by ng-repeat for current element. This scope holds the current element in the iteration.
Child scope created by ng-include which inherits from ng-repeat's created scope.

的 $父当前范围的属性，您可以访问它的父范围。

The $parent property of current scope allows you to access its parent scope.

从本质上讲，范围由创建NG-包括是空的，当你访问值和从父在 node.html ，它实际上访问的的继承的值的>通过 NG-重复创建范围。

Essentially, scope created by ng-include is empty, when you access value and key in your node.html, it actually access the inherited values from parent scope created by ng-repeat.

在您node.html，访问 {{}值} 实际上是一样的 {{$ parent.value}} 。因此，如果你需要访问当前元素的父，你必须做的一步通过访问 {{$父。$ parent.value}}

In your node.html, accessing {{value}} is actually the same as {{$parent.value}}. Therefore if you need to access the parent of the current element, you have to do one step further by accessing {{$parent.$parent.value}}

这情况搞清楚：

    <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 初始化父NG-包括。像这样的：

If you need to simplify the way to access the parent, you could try initializing the parent using onload of ng-include. Like this:

在您的顶层，没有 NG-如果 =>只有2级深

In your top level, there is no ng-if => only 2 level deep

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

在你的分层次，有 NG-如果 =>深3个级别：

In your sub levels, there is ng-if => 3 levels deep:

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

在模板中，您可以访问使用父父，使用 parent.parent 等祖父母。

                        这篇关于在NG-重复递归迭代时如何获得内部的父元素NG-包括的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！