angular-ui / ui-codemirror

This directive allows you to add CodeMirror to your textarea elements.
http://angular-ui.github.io/ui-codemirror
MIT License
378 stars 193 forks source link

uiRefresh, use $timeout to delay refresh until everything is loaded #68

Closed nadersoliman closed 9 years ago

nadersoliman commented 10 years ago

In lieu of issues #41 and #55 I had codemirror inside a tab. It is not refreshing despite adding ui-refresh attribute with proper model name something like

<textarea ui-codemirror="theOptions" ng-model="obj.samples_json" ui-refresh="obj.samples_json"></textarea>

Introducing the following patch fixed for me, and I guess it will fix it for others

$timeout(function(){codeMirror.refresh();}, 100);

@ https://github.com/angular-ui/ui-codemirror/blob/8b6b3b002a144a17216d34560ca415576c2b8bf4/src/ui-codemirror.js#L101

nadersoliman commented 10 years ago

I made a directive to address this issue

.directive('cmlCodemirrorRefresh', [
  '$timeout'

  ($timeout) ->
    ###
      usage: <textarea ui-codemirror="options" ng-model="obj.samples_json" class="cml-codemirror-refresh"></textarea>
    ###
    restrict: 'C'
    link: (scope, element, attrs)->
      attrs.$observe 'ngModel', (value) ->
        #console.log 'to watch', value
        scope.$watch value, (newValue)->
          #console.log 'for ', value, 'got new value', newValue
          $timeout ->
            #console.log 'refreshing codemirror element', element.next()
            element.next()[0].CodeMirror.refresh()
          , 100
])
naku commented 9 years ago

Same issue with ui-codemirror + AngularStrap tabs combination.

This fix worked for me:

if (newVal !== oldVal) {
  $timeout(function() {
    codeMirror.refresh();
  });
}