I would like to create a collection similar to this structure:
var array = [{innerText: "I was with ", index:0},{obj: "Mary", id: 1, index:1}, {innerText: " and ", index:2},{obj: "John", id: 2, index:3}];
The goal is to have a content editable div that displays the elements from the array and stays synchronized with any changes made to the innerText or object inputs. When the user modifies the content in the div, the array should be automatically updated.
For instance, the div might look like this (without AngularJS):
<div contenteditable="true">
I was with <input type="text" value="Mary" data-index="1"/> and <input type="text" value="John" data-index="3"/>
</div>
This setup should support backspacing within the div, inserting new inputs, and typing text, all while updating the array accordingly.
The current implementation involves directives for the collection as a whole, the innerText values, and the objects. However, the binding does not account for mutations in the internal DOM of the contenteditable element. There's also an issue with using {{innerText}} as a template for innerText, as it doesn't guarantee proper binding when typing text in the editable area.
Edit: Additionally, a collection structured like this could still be beneficial with the same contenteditable functionality:
var array = [{obj: "Mary", id: 1, index:1}, {obj: "John", id: 2, index:3}, {innerText: "I was with @ and @""];
Edit2: Reopening the question to address the lack of true two-way binding in the previously accepted solution. The updated code should generate a model like the following:
"modelValue": [
{
"innerText": "abc",
"index": 0
},
{
"obj": "abc",
"index": 1
},
{
"innerText": "abc",
"index": 2
}
]
The corresponding view should display:
"viewValue": "\n abc\n <input type=\"text\">\n abc\n "
The solution should include a service that generates a static model when a button is pressed, along with a controller function that sets the modelValue in the scope and converts it into the desired viewValue format.
Edit3: Demonstrating how true two-way binding can be achieved without using $watch by leveraging compile pre-link and post-link methods:
*Code examples and CSS styling included*
*JavaScript and AngularJS libraries included*