角度树视图 - 获取父节点答案

【问题标题】：angular treeview- get parent node角度树视图 - 获取父节点
【发布时间】：2015-03-19 13:23:14
【问题描述】：

我正在使用 angular treeview 使用 angularjs 构建一棵树。选择一个节点后，我想知道所选节点的“父节点”。

我不想在 json 数据中添加一个名为“parent”的属性，也不想创建任何父子键值对数组。
可以在初始文件中进行哪些更改以获得结果？

HTML

<div ng-app="myApp">
  <div ng-controller="myController">

    <div style="display:table-row; width:500px;">
      <div style="display:table-cell; width:250px;">
        <div style="margin:10px 5px 30px 5px; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;">
          <span><b>First Tree's Selected Node</b> : <br>{{tree01.currentNode.roleName}}</span>
        </div>
      </div>
      <div style="display:table-cell; width:250px;">
        <div style="margin:10px 5px 30px 5px; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;">
          <span><b>Second Tree's Selected Node</b> : <br>{{tree02.currentNode.roleName}}</span>
        </div>
      </div>
    </div>
    <div style="display:table-row; width:500px;">
      <div style="display:table-cell; width:250px;">

        <!-- FIRST TREE -->
        <div data-angular-treeview="true" data-tree-id="tree01" data-tree-model="roleList1" data-node-id="roleId" data-node-label="roleName" data-node-children="children">
        </div>


      </div>
      <div style="display:table-cell; width:250px;">

        <!-- SECOND TREE -->
        <div data-angular-treeview="true" data-tree-id="tree02" data-tree-model="roleList2" data-node-id="roleId" data-node-label="roleName" data-node-children="children">
        </div>
      </div>
    </div>
  </div>
</div>

Here's the working fiddle

【问题讨论】：

标签： angularjs treeview parent

【解决方案1】：

尝试这些更改。

在标记中：（添加 ng-click 属性）

 <div
    data-angular-treeview="true"
    data-tree-id="tree01"
    data-tree-model="roleList1"
    data-node-id="roleId"
    data-node-label="roleName"
    data-node-children="children" 
    ng-click="printParent($event);">
</div>

在控制器中

$scope.printParent = function ($event) {
  var root = $scope;
  var currentScope = angular.element($event.target).scope();
  console.log('selected Node details: ', currentScope.node);
  currentScope = currentScope.$parent;
  console.log('parents::')
  while(currentScope.$id !== root.$id) {
    console.log(currentScope.node);
    currentScope = currentScope.$parent;
  }
}

Working Fiddle

在指令中访问父级：

点击处理程序

scope[treeId].selectNodeLabel = 
    function( selectedNode, selectedNodeScope ){
        if (selectedNodeScope) {
            var parentScope = selectedNodeScope.$parent,
                index,
                targetArray;
            if (parentScope.node) {
                targetArray = parentScope.node.children;
            } else {
                //root node
                targetArray = scope[treeModel];
            }
            // to insert after the index;
            if (targetArray.length) {
                index = targetArray.indexOf(selectedNode);
                console.log('index :: ', index, 'parent::', targetArray);
                if (index !== -1) {
                    //targetArray.splice(index, 0, newNodeToBeAdded)
                }
            }
        }
    }
    // other stuff
}

在指令模板中

<span data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node, this)">{{node.' + nodeLabel + '}}</span>

Working Fiddle

【讨论】：

感谢@Vinay k 的编辑和回答。我获取父节点的目的是添加一个节点作为当前选定节点的兄弟节点。由于您的方法是在主控制器中编写的，因此 m 无法访问指令内的父节点。
您想在哪个指令中访问父级？请根据您的期望更新您的 plnkr。
我们能否在这个 link 的 'selectNodeLabel()' 方法中访问父级。当 m 尝试添加一个节点时，它会被添加到不同的范围，而不是在树中动态呈现。
@vedants，我已经更新了小提琴和答案，请检查。
@vedants 很高兴为您提供帮助。

【解决方案2】：

您可以像这样简单地打印父级。在标记中

 <div
    data-angular-treeview="true"
    data-tree-id="tree01"
    data-tree-model="roleList1"
    data-node-id="roleId"
    data-node-label="roleName"
    data-node-children="children" 
    ng-click="printParent(this)">
 </div>

在控制器中

 $scope.printParent = function(item) {
   var parent = item.$modelValue;
   Console.log(parent);
 };

【讨论】：