为 ng-repeat 指令的项目名称分配数字

Question

我有一个递归的 AngularJS 指令，它本身嵌套了很多次。问题是它无法正常工作，因为 ng-repeat 中的项目名称与外部元素中的项目名称完全相同。有点难理解，所以我只提供一些简单的代码来演示这个问题：

<div ng-repeat="item in items">
    <div ng-repeat="item in items">
    {{item.value}}
    </div>
</div>

项目的值将等于外部<div>，而不是内部值。

我想要的是基于嵌套分配一个数字（即 0 - 根 ng-repeat，0-1 - 根目录的第二个孩子，1-0，第二个目录的第一个孩子等等）指令生成模板时的每个项目名称，因此它看起来像这样：

<div ng-repeat="item-0 in items">
    <div ng-repeat="item-0-0 in items">
    {{item.value}}
    </div>
</div>

这是我的指令：

app.directive('recursiveFields', function ($compile, $http) {
    return {
        scope: {
            field: '=field',
            model: '=model'
        },
        restrict: 'E',
        replace: true,
        controller: "httpPostController",
        template: '<div ng-repeat="nestedField in field.nestedFields"><div ng-show="{{!nestedField.isEntity && !nestedField.isEnum}}">' + '<p ng-show={{nestedField.isRequired}}>{{nestedField.name}}*: </p>' + '<p ng-show={{!nestedField.isRequired}}>{{nestedField.name}}: </p>' + '<input type="text" ng-model="model[field.name][nestedField.name]" ng-change="getCreateEntityAsText()"' + 'class="form-control" placeholder="{{parseClassName(nestedField.type)}}">' + '</div>' + '<div ng-show="{{nestedField.isEnum}}">' + '<p ng-show={{nestedField.isRequired}}>{{nestedField.name}}*: </p>' + '<p ng-show={{!nestedField.isRequired}}>{{nestedField.name}}: </p>' + '<select ng-model="model[field.name][nestedField.name]" ng-change="getCreateEntityAsText()" class="form-control">' + '<option></option>' + '<option ng-repeat="enumValue in nestedField.enumValues" label={{enumValue.name}}>{{enumValue.ordinal}}</option>' + '</select>' + '</div>' +

        '<div ng-show="{{nestedField.restResourceName != null}}">' + '<accordion close-others="oneAtATime">' + '<accordion-group heading={{nestedField.name}} is-open="false">' + '<button type="button" ng-click="appendDirective($event, model, field)">I should append a "recursiveFields" directive</button>' + '</accordion-group>' + '</accordion>' + '</div>' + '</div>',

        link: function (scope, element, attrs, controller) {
            if (scope.field && scope.field.restResourceName != null) {
                $http.get(CONSTANTS.EXPLAIN_URL + "/" + scope.field.restResourceName)
                .success(function (data, status) {
                    scope.field.nestedFields = [];
                    data.content.resource.fields.forEach(function (field) {
                        if (field.isEnum) {
                            $http.get(CONSTANTS.ENUMS_URL + scope.$root.parseClassName(field.type)).success(function (data, status) {
                                field.enumValues = [];
                                for (var index in data.content.values) {
                                    field.enumValues.push(data.content.values[index]);
                                }
                            })
                        }
                        scope.field.nestedFields.push(field);
                    })
                })
            }

            scope.appendDirective = function ($event, model, field) {
                //              var recursiveFields = $('<recursive-fields model="model" field="field"></recursive-fields>');
                var recursiveFields = $('<p>new text </p>');
                recursiveFields.insertAfter($event.target);
                $compile(recursiveFields)(scope);
            }

            scope.getRandomSpan = function () {
                return Math.floor((Math.random() * 6) + 1);
            }
        }
    }
})

有什么想法可以实现吗？每个有用的答案都受到高度赞赏和评估。

谢谢。

Answer 1

为什么不使用另一个 var 名称？

<div ng-repeat="item in items">
    <div ng-repeat="innerItem in items">
        {{item.value}} 
        {{innerItem.Value}}
    </div>
</div>

或者也许你的指令可以有这个模板：

template: '<div ng-repeat="nestedField[$id] in field.nestedFields .....">

其中 $id 是您的指令创建的新范围的标识符。

当然，在这种情况下，您应该在访问范围变量时指定 $id：

<div ng-show="{{nestedField[$id].restResourceName != null}} ...>