I am encountering a complex problem with nested bindings in custom directives. The JSON structure I am working with resembles the following;
{
survey:
questions:[
{
text:'Question 1',
answers:[
{
text:'Answer 1'
},
..
]
},
...
]
}
Each survey contains multiple questions, and each question has multiple answers. I have developed directives for survey and question forms. Question directives contain nested answer directives. These directives are looped out and connected to the JSON data. Here is an example of the HTML code:
The page;
<div>
<survey-form></survey-form>
<div ng-repeat="question in survey.questions">
<question-form></question-form>
</div>
</div>
The question-form directive;
<div>
<h1>{{question.title}}</h1>
<div ng-repeat="answer in question.answers">
<answer-form></answer-form>
</div>
</div>
Everything seems to be displaying correctly without any errors in the console. However, after the binding process to the form inputs is complete, certain text attributes in the JSON data are being set to undefined unexpectedly. This issue does not occur with all elements in the nested JSON - some text values become undefined while others remain unchanged from the original JSON source.
Is there anyone who can provide insights into this issue? It is quite frustrating, and I suspect it might be a bug in Angular...
Thank you in advance