ui-codemirror placed within custom directives fails without an error

Question

I am trying to use ui-codemirror angular directive from code mirror angular library and the use case is that I have to place it within a custom directive .

But when I place it within a custom directive I am unable to see the code mirror in the text area. infact the text area becomes non editable .

But when I place it outside the custom directive it works as expected .

I am attaching the fiddle code for this http://plnkr.co/edit/NVFuumrGq2FJ8d8EC8Xn?p=preview . I have no option to even debug since there is not even an error . Unable to conclude if it is a bug.Please guide me .

Latest Update (17 Jan 2014) -

I posted the same as an issue in the code mirror git hub repo . The person working on it confirmed that it is a bug and that he is not going to fix it for now . So may we should try workarounds . see : https://github.com/angular-ui/ui-codemirror/issues/36#issuecomment-31925751

Answer 1

Here you go I've fixed it for you:

This is not a bug with code mirror or a bug with AngularJS. Since the release of 1.20 child nodes that exists within a compiled directive that has an isolite scope no longer inherit the new scope as they have already be assigned to the parent scope (I know it's confusing) but in this case you needed to transclude the existing code mirror content using the linker function in the directive.

Here you go: http://plnkr.co/edit/MaIpdJsPE6qpYqR8BJtQ?p=preview