递归树模板，包括以多维索引作为参数的 ng-click

Question

晚上好，

有没有什么方法可以创建一个递归显示结构并对每个项目都有 onclick 函数的模板。此 onclick 函数需要当前索引，包括此元素的所有父索引（例如下面列表中的 BMW [0][2][1]）。

A [0]
  Tree [0][0]
    ...
  House [0][1]
    ...
  Car [0][2]
    Mercedes [0][2][0]
    BMW [0][2][1]
    Audi [0][2][2]
    VW [0][2][3]
    Chrysler [0][2][4]
B [1]
  ...
C [2]
  ...

我当前的指令看起来像这样，但我不知道我如何无法获得 ng-click 函数的每个元素的完整索引。

app.directive('collection', function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            collection: '='
        },
        template: `
          <ul>
            <member ng-repeat='member in collection'
                    member='member' index='$parent.index + $index'>
            </member>
          </ul>`
    }
});

app.directive('member', function ($compile) {
    return {
        restrict: "E",
        replace: true,
        template: "<li ng-click=\"select(member)\">{{member.title}}</li>",
        link: function (scope, element, attrs) {
            var collectionSt = '<collection collection="member.sub"></collection>';
            if (angular.isArray(scope.member.sub)) {
                $compile(collectionSt)(scope, function(cloned, scope) {
                    element.append(cloned); 
                  });
            }
        }
    }
});

Answer 1

在控制器中，为每个成员添加一个 fullIndex 属性和 return 即属性作为 ng-click 函数的参数：

template: `<li ng-click="select(member.fullIndex)">{{member.title}}</li>`,

让模板使用 AngularJS 表达式计算 fullIndex 值会使应用难以理解、调试和维护。最好在JavaScript.

中进行计算

递归树模板，包括以多维索引作为参数的 ng-click

Recursive tree template including ng-click with multidimensional index as parameter

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-repeat