I am facing a challenge with my AngularJS directive that is recursively nested within itself multiple times. The issue lies in the fact that the names of items in ng-repeat conflict with those in the outer element, causing it to malfunction. To illustrate the problem, consider the following simple code snippet:
<div ng-repeat="item in items">
<div ng-repeat="item in items">
{{item.value}}
</div>
</div>
In this scenario, the value of the item will match that of the outer <div> instead of the inner one.
My goal is to assign a distinct number based on the nesting level (e.g., 0 for root ng-repeat, 0-1 for the second child of the root directive, 1-0 for the first child of the second directive, and so forth) to each item name when generating a template using the directive. This would result in a structure like this:
<div ng-repeat="item-0 in items">
<div ng-repeat="item-0-0 in items">
{{item.value}}
</div>
</div>
Below is the snippet of the directive I have been working on:
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);
}
}
}
})
If you have any suggestions or solutions on how to address this issue, please feel free to share. Your input is greatly appreciated.
Thank you.