Apply ng-style after element is created with jquery

Question

I use CodeMirror and angular. CodeMirror element is created dynamically by calling

myCodeMirror = CodeMirror.fromTextArea( document.getElementById("paper"), opts );

This line creates a .CodeMirror div after textarea#paper.

Question is how do I apply ng-style directive to div.CodeMirror which is created after calling fromTextArea function?

The reason of it that I have to style exatly this dom element, not any other.

Answer 1

If you want to do that manually with the jquery plugin, you'll need to $compile your generated HTML :

  var html = '<div ng-bind="exp"></div>';

  // Step 1: parse HTML into DOM element
  var template = angular.element(html);

  // Step 2: compile the template
  var linkFn = $compile(template);

  // Step 3: link the compiled template with the scope.
  var element = linkFn(scope);

  // Step 4: Append to DOM (optional)
  parent.appendChild(element);

Some information + example source here : https://docs.angularjs.org/guide/compiler

But you should definitely use a dedicated angularJS solution like http://angular-ui.github.io/ui-codemirror/

When using a jquery plugin (which modify DOM) you should really search its angularJS equivalent or you'll gonna have some serious probleme (like you're having)

Hope this helps