user2062455
user2062455

Reputation: 421

How to refresh CodeMirror with ui-codemirror and AngularJS?

https://github.com/angular-ui/ui-codemirror

I need to make a syntax highlighter in angular and save the results ina database.

I am using ui-codemirror but I cannot make it to refresh the textarea everytime that I change the "pre" in the docs it says

<textarea ui-codemirror ng-model="x" ui-refresh='isSomething'></textarea>

but I cannot make it work.

anyone has any idea on how to do this?

Upvotes: 2

Views: 3385

Answers (2)

Andre Elrico
Andre Elrico

Reputation: 11480

Thank you alot. Im a angularJS noob and I solved it. For other newbies. Make sure you inject $timeout beforehand.

Upvotes: 0

johanmynhardt
johanmynhardt

Reputation: 300

I had the same issue and could not figure out a solution for a while.

The CodeMirror instance will be updated once a scope variable/function returns true. That can be determined by a function doing a calculation on the value being displayed, but in my snippet I have my data updated from the result of a broadcasted event. I set the scope variable to be checked to true, and then with a short delay, I change it back to false.

$scope.$on(ART_EVENTS.updateOverview, function (event, data) {
    $log.info("received overviewData in articleController.");

    // do stuff with the data
    // ...

    $scope.refreshCodemirror = true;
    $timeout(function () {
      $scope.refreshCodemirror = false;
    }, 100);
});

And then in the view:

<textarea ui-codemirror ng-model="x" ui-refresh='refreshCodemirror'></textarea>

I do realise that there might be better solutions, but this works for what I need.

Upvotes: 10

Related Questions