Update:
Experimenting with Angular2 Beta, I am working on incorporating an "editor" component template that includes a directive wrapping the Ace editor. In this scenario, the "editor" component acts as the parent of the Ace wrapper directive, and my goal is to retrieve or set the code from within the directive.
Although the directive functions correctly on its own, when integrated into this component, nothing is displayed without any errors appearing in the browser console. You can access a repro at this Plunker link: http://plnkr.co/edit/kzclJLIX6hRMWa14A0Pb.
The ace.directive directive responsible for wrapping the Ace editor includes a text property and a textChanged event.
// Code snippet
The editor.component component utilizes the directive, with the directive's text property linked to the parent component's xml property and the textChanged event connected to the parent's onXmlChanged function.
This bidirectional data binding could also be implemented as follows:
// Another code snippet
The editor's code is outlined below:
// More code here
Update #1:
Due to issues with Plunker, I continued troubleshooting locally instead of transpiling and loading .ts files.
After further investigation, it was necessary to add the $event argument to the template call based on my comment. The updated directive now looks like this:
// Directive update
As illustrated in the new directive structure above, the editor component template should include the directive in the following manner:
// Updated component template
However, attempting to programmatically set the editor component's xml property may lead to an infinite loop due to triggering events continuously. To address this issue, a workaround was added to the code temporarily until a more permanent solution is found:
// Workaround implementation