How can I react to additions and deletions of keys in a scope object as well as to changes to sub values?
The new version of plunker has the concept of a scratch. The scratch is the current state of the editor that can periodically be saved as a plunk. The scratch is structured as follows:
{
files: {
"index.html": {
filename: "index.html",
content: "<h1>Html goes here</h1>"
}, /* More files... */
}
}
The scratch is defined as a directive and so I can't seem to get access to the parent scope to broadcast events. See scratch.coffee.
Because the scratch is the authority on what is in the current edit session, it seems normal that it should generate the events that would allow other components (the ace textarea) to react to file additions/deletions/changes.
With things organized as described above, I can't figure out how to let the scratch
remain the authority on edit session state while allowing it to 'notify' other components of changes to its structure.
Any ideas?
@IgorMinar check out what I ended up doing in https://github.com/filearts/plunker/blob/angularjs/servers/www/assets/js/directives/ace.coffee
As you can see, I created an
ace
directive with represents the editor itself. This directive, in turn, has a template that iterates over another custom directivesession
based on thescratch.files
object. This second directive gets its own scope thanks to the beauty of AngularJS and as such can use the great two-way binding features of ngModel. This lets thesession
properly encapsulate the data and behaviour of each buffer that can then be attached as needed to the ace instance.I think that this is a pretty neat pattern for interacting with external libs that can act on an arbitrary number of sub-elements of $scope data.
All in all, a truly awesome lib. Sorry for asking such 'trivial' questions without hacking away first. I'm just excited to get something usable out the door!