Custom Directive breaks model interpolation

[AlanFoster]

Hey,

I've potentially noticed a bug when using using AngularJs + AngularUI's CodeMirror directive. Using the custom directive seems to be breaking the model's template interpolation on all of the the immediate children after the textarea

The sourcecode for this example is here - I've tried to cut down the example as much as I could

Steps to reproduce:

• Input 'foo' into the textarea

What I expect to happen

The word 'foo' should be present in all 3 of the output lines

What actually happens

Output #1 works :: foo
Output #2 doesn't work :: {{codeMirrorModel}}
Output #3 works :: foo

This seems to be present in the following AngularJs versions 1.0.0-1.0.3

Hopefully this is enough information for you guys :)
Cheers

[petebacondarwin]

This is because the code mirror directive is adding a new element in the middle of angularjs's compile process, which is confusing it.

Here is a minimal example: http://plnkr.co/edit/YD6OYiIjsLxyRN9CIiZY

Not sure if this counts as a bug because you are not supposed to mess with siblings of the element being compiled. But the was recently a PR that may allow this to happen: #1788

In the meantime, this can be worked around by ensuring that the directive is the last element of its siblings.

[AlanFoster]

Thanks for your answer @petebacondarwin - I didn't realise that it was manipulating the DOM behind the scenes like that :)

That pointed me to trying to manipulate the DOM during the pre-compile phase like below and it worked just fine

app.directive('add', function() {
  return {
    compile: function(scope, element) { 
      element.after('<h1>');
    },
    link: function(scope, element) {
      // ...
    }
  }
})

I'll close this issue as it's obviously working as designed, but it would be nice if it worked too :)

Cheers