When using CodeMirror's replaceSelection() method, the following error is logged to the console:

Error: $apply already in progress

Here's a fiddle reproducing the error: http://jsfiddle.net/MBU32/

angular-ui.github.io code seems to be in private
Where to raise an issue or PR ?

Issue 1:
When codemirror directive is applied to a textarea element, it replaces it completely placing a div with the same ID.

Issue 2:
Also, I cannot see the cursor in the editor and the css classes are not being applied properly. For eg. 'CodeMirror' class is not applied to the Div element which replaces the textarea.

Thanks

Codemirror is currently released at 4.12. ui-codemirror is currently pinned to ~4.8.

Could the bower.json file be updated to use the more recent codemirror?

To use code formatting a small piece of js code is needed - but i think the lines must be inside the directive. Outside solution does not work.

Example: http://codemirror.net/2/demo/formatting.html

https://groups.google.com/forum/#!topic/codemirror-announce/5WCakVK_xnY

As I write this 4.0.3 is available.

I did just try to bump this in bower.json and move on, but there were some unit tests that failed in PhantomJS.

If someone with more experience with ui-codemirror can accomplish this, that would be terrific, however, I may look at this next week myself if I get a chance.

Your recent commits merged a PR in which added a $timeout call here:
https://github.com/angular-ui/ui-codemirror/blob/master/src/ui-codemirror.js#L143

I find when this gets called, there are cases where this is undefined somehow, in codemirror.refresh.

This seems to be fixed easily by passing a function:

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

I am unsure why this happens, but it completely breaks in my case when calling $apply shortly after initialisation.

Can you guys please publish this to npm ?

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 .

When installing using bower, the codemirror dependency with 3.19 is broken (CodeMirror side) either use 3.18 or contact them

CodeMirror offers nice CodeFolding. Demo: http://codemirror.net/2/demo/folding.html

With ui-cm Directive it does not work. I use something like this ....

        var foldFunc = CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder);
        _cm.on("gutterClick", function (e) {
            foldFunc(_cm, _cm.getCursor().line);
        });

But when clicked into the guttter zone, the tagRangeFinder runs in an endless loop. The only one difference I found to the original example, ui-cm return a different object.

Hi,

I'm having an issue using ui-codemirror on an Blackberry 10 WebWorks app.
So I'm just creating some ordinary html page with a <textarea ui-codemirror> element on it.
If I now ran the app on my phone I'm unable to delete empty lines with the backspace key on my virtual keyboard.
So I have no ability to delete empty lines. In fact after having pressed backspace several times I'm also unable to delete lines which contains text characters.
The cursor simply doesn't move backwards, or upwards if I'm at the beginning of an empty line.

The WebWorks SDK consists also of an emulator run inside of Google Chrome. There I'm not having any issues at all.

I know this is rather some very specific problem. I also don't know, whether its an codemirror, angularjs or ui-codemirror issue, so I'm posting here, because ui-codemirror is the last one in the chain.

Can anyone put me in the right direction?

I see that demo.html should be used in conjunction with Plunker. It seems that demo.html must have parent container, where Plunker-logic is defined. But there is no parent document. Please explain how to use the demo.

I am writing a directive to wrap the ui-code mirror and all of its options etc. for my site. I was getting 'Error: $digest already in progress' when I updated the ngModel attribute from within a watch.

This is caused by line 68:

if (!scope.$$phase) {
scope.$apply();
}

Changing the line to check the parent scope too fixes the problem:

if (!scope.$$phase && !scope.$root.$$phase){
scope.$apply();
}

It doesn't look like the onLoad function is called when you bind ui-codemirror="options" rather than a static object like ui-codemirror="{onLoad:foo}".

It would be nice to have some way to get a reference to the editor without putting the entire configuration into the HTML -- either having onLoad called if it changes, or some other mechanism.

I'm having a wierd issue with linting not working and getting an error about it (Error: Required option 'getAnnotations' missing (lint addon)) and so far no normal or usual reason for this has been found related to CodeMirror itself so I'm looking farther afield.

I've confirmed some things with the CodeMirror author and still not explanation found, it should be working.

I'm guessing using this directive shouldn't affect this since everything else seems to work fine but just thought I would check to be certain.

Hello,

I use requireJs for load code mirror.
If requireJs is use code mirror don't create window.CodeMirror attribute.
To get codeMirror instance method require('codeMirror') must be used.
To correct this issue I have add this code line :

window.CodeMirror = require('codeMirror');

my require configuration :

require.config({
    paths : {
        codeMirrorAngular : 'angular-ui-codemirror/ui-codemirror',
        codeMirror : 'codemirror/lib/codemirror'
    },
    shim : {
        codeMirror : {
            deps : [],          
            exports: 'codeMirror'
        },
        codeMirrorAngular : {
            deps : ['codeMirror'],
            exports: 'codeMirrorAngular'
        }
    }
});

Hi,

Im new to Angularjs.

How do i use the Content manipulation API methods?

eg. doc.lineCount() and cm.hasFocus()

Thanks.

need
ngModel.$render()
after
ngModel.$setViewValue newValue
or model may not update values.

https://github.com/angular-ui/ui-codemirror/blob/master/src/ui-codemirror.js#L29

          if (iElement[0].tagName === 'TEXTAREA') {
            throw new Error('NOPE');

Please replace this with a better error message, will you? Thanks.

This is my code:

HTML:

JS:
.controller('EditorController', ['$scope', function($scope) {
$scope.editorOptions = {
lineWrapping: true,
mode: "javascript",
theme: "monokai",
lineNumbers: true
};
}]);

But the theme and mode never changes, actually only lineNumbers is working I think

Angular: 1.2.16
CodeMirror: 3.19.0
ui-codemirror: 0.1.0

There's an example in the readme:

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

However, it seems it's not a good idea to do so. In my use case, ng-model is automatically written by angular itself via code at angular.js: 16876~16919, like below:

 var listener = function() {
   if (composing)
       return;
   var value = element.val();

   // By default we will trim the value
   // If the attribute ng-trim exists we will avoid trimming
   // e.g. <input ng-model="foo" ng-trim="false">
   if (toBoolean(attr.ngTrim || 'T')) {
       value = trim(value);
   }

   if (ctrl.$viewValue !== value || 
   // If the value is still empty/falsy, and there is no `required` error, run validators
   // again. This enables HTML5 constraint validation errors to affect Angular validation
   // even when the first character entered causes an error.
   (validity && value === '' && !validity.valueMissing)) {
       if (scope.$$phase) {
           ctrl.$setViewValue(value);
       } else {
           scope.$apply(function() {
               ctrl.$setViewValue(value);
           });
       }
   }
 };

Note, angular is trying to assign an empty string into that model, which is fetched from a jquery function: val() and always returns empty string. The final result is this ngModel may be an empty string.

I didn't dive into this problem yet, but it is fine when use div as markup. I guess that angular tries to attach its own handlers which conflict with ui-codemirror, when use textarea.

Thus, I recommend not to use textarea as markup.

Hi!

I have a conflict in bower because my project uses the latest AngularJS (1.2.1) whereas yours tries to install 1.0.x
Could you update your bower.json file, please?

I just tried to make codemirror run with multiple areas that are supposed to be editable (using an ng-repeat) and it did not work.

I finally found that removing "use strict;" will allow it to work properly.

I had to add
if(!scope.$$phase) {

}
Around the $apply on line 88 to stop Error: [$rootScope:inprog] digest in progress.
I think it was due to updating multiple code mirrors. This definitely fixed my problem and i can't think of any harm in adding it.

I created a plunkr, demonstrating the issue:

http://plnkr.co/edit/KTj8jubrAApkFDLdRbiu?p=preview

the ng-model is bound properly to the directive, but clicking away/blur triggers a change event in jquery, which triggers a wrong .setValue() which uses the element.val(), which is always "", instead of using the proper ngModel. Having a div like div ui-codemirror works though, so it is only an issue with textarea.

I need to add an autocomplete helper, like this one http://codemirror.net/demo/xmlcomplete.html
Any idea on how to implement this? I just couldn't find a way...

Thanks!

I am using AngularJS , I need to change the mode of Code-Mirror Dynamically as soon as the language name changes.

example: mode:{{ language}} , I want the name of language to be stated as the new mode for codemirror.

Hi!

The version you just pushed (0.0.6) broke my project.

It doesn't seem to be related to CodeMirror going from 3.15.0 to 3.19.0: I forced ui-codemirror to 0.0.5 and CodeMirror to 3.19.0 in my bower.json, and it works fine.

I am using ui-codemirror like this:
template:

<textarea class="form-control" id="code" placeholder="Code" ng-model="code" ui-codemirror="cm"></textarea>

controller:

$scope.cm = cm; // This is my global CodeMirror's configuration
$scope.cm.mode = 'text/x-php';

Do you see something wrong?
For now I'll keep forcing the version numbers in my bower.json, but I'd like to understand.

Because ng-model works with setValue, a change event is instantly fired after loading, and this also enables the user to undo (ctrl+z). Is this fixable?

Depending on which documentation you look at, onLoad looks like any other configuration option. But it only works when called in a very specific way which makes it different than other configuration options, and more difficult to use.

In the documentation here: http://angular-ui.github.io/ui-codemirror/ , It looks like you can set ui-codemirror to be equal to a JSON string representation of a configuration hash.

And, in the documentation here: https://github.com/angular-ui/ui-codemirror , it looks like one of the options in that hash can be onLoad ; and also that instead of setting it in the markup you can set it in the opts.

However, at least in my experience so far, you can't set 'onLoad':'someScopeFunc' in the configuration-opts hash, it is ignored. And, you can't pass ui-codemirror="{'onLoad':'someScopeFunc'}" in the markup, the quotes mess it up.

In my view, onLoad should be made to work like any other configuration option, in the -opts hash, and should function when specified as valid JSON (e.g. with quotes around the key and value).

There is no build-doc task as it says in readme.
grunt build-doc will out Warning: Task "build-doc" not found.

After my editor has been created I may want to change the mode as in this example: http://codemirror.net/demo/loadmode.html

I don't see a way of accessing the underlying editor to do this. Is there a recommend way of making these kinds of changes to the editor or is it something that needs adding?

This error is visible on the Mode-Changing demo at http://angular-ui.github.io/ui-codemirror/
Enter text in the editor and you'll see the error message in the console.
On Firefox: TypeError: scope.$applyAsync is not a function
On Chrome: Uncaught TypeError: Object #<h> has no method '$applyAsync'

Error is triggered at line 130 of ui-codemirror.js

If you use <ui-codemirror ui-codemirror-opts="editorOptions"></ui-codemirror> and change editorOptions; for instance change the readonly property; the editor will not update.

It works with <textarea ui-codemirror="editorOptions" ng-model="x"></textarea> though.

works perfect without ng-repeat as soon as its in one nothing shows up

Adding characters (space, letters, anything...) to a codemirror textarea seems to set the ng-model to undefined (after the textarea loses focus?).

On the other hand, removing character or adding lines seems to work completely fine.

This issue is best described by example so here's a plnkr reproducing it:
http://plnkr.co/edit/AETLQPq24prFQZxisnL9?p=preview

Steps to reproduce:

1. Add characters to the console.log() line
2. The changes should be reflected in output below the codemirror textarea
3. Click on the button: the text in the output disappear (and if you check the Chrome console you can see cmModel is now undefined)
4. Add more characters, click on the button, nothing changes
5. Remove some characters (or add a line), click on the button, the text appears again in the output.
6. Add characters: same behaviour as before, cmModel becomes undefined.

I'm out of options on this one, I've no idea what's causing this.

Any suggestions on how to get this to work within a modal window, using ui.bootstrap. It works fine outside of the modal, but not within. Not sure if it needs to be re-initialized or something.

Thanks!

how to set code edit area height?

The scope.$apply made in the "on change" event does not check if a digest is already in progress. You should wrap it with a check of the $scope.$$phase or use the angular 1.2 $scope.$evalAsync.

Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.2.17/$rootScope/inprog?p0=%24digest
at http://localhost:40230/bower_components/angular/angular.js:78:12
at beginPhase (http://localhost:40230/bower_components/angular/angular.js:12826:15)
at Scope.$get.Scope.$apply (http://localhost:40230/bower_components/angular/angular.js:12615:11)
at Scope.ng.config.$provide.decorator.$delegate.proto.$apply (:855:30)
at http://localhost:40230/bower_components/angular-ui-codemirror/ui-codemirror.js:71:23
at Array. (http://localhost:40230/bower_components/codemirror/lib/codemirror.js:7154:42)
at fireCallbacksForOps (http://localhost:40230/bower_components/codemirror/lib/codemirror.js:1982:21)
at endOperation (http://localhost:40230/bower_components/codemirror/lib/codemirror.js:1997:11)
at null.setValue (http://localhost:40230/bower_components/codemirror/lib/codemirror.js:2167:17)
at null.setValue (http://localhost:40230/bower_components/codemirror/lib/codemirror.js:6683:40)

I've copied tabs directive from angularjs website and put inside a pane. But ui-codemirror directive initialize only white box, which is not clickable. Content seems to be right compiled, but CM is not working. Thanks.

I'm trying to use the directive on a page where I have a variable number of segments of code I want edited separately, so I'm trying to use it inside ng-repeat.

I've created a plunk at http://plnkr.co/edit/bvrAFV7LcINIYuuaYkw3?p=preview based on one of the demos. This uses pretty old versions of the directive and CM itself, I think, but I've tried newer versions and it doesn't seem to help.

Am I doing something wrong? Is it simply unable to work in this way? Or is there a bug somewhere?

Thanks.

Ross

There is no way, currently, to leverage the Code Mirror merge addon. The tricky thing here is that it's a different constructor, and does not follow the same API as the normal CodeMirror constructor.

It's quite likely that a second directive will need to be created to support this.

Why not limit it use textarea only?

I wish the directive can be 'AE'.

Per the instructions, I got the ui-codemirrror directive up and working. I used the ng-model directive to bind it to a property on the scope. This works great.

However, the ui-codemirror directive does not appear to be modifying the model when the user interacts with the editor. For example, I can set the scope property (e.g. $scope.demoString) to be "Hello World" when the controller initializes, and when I load the page the editor widget shows me the text. Then I change the text to add punctuation, so it reads "Hello, World!!!".

The model, $scope.demoString , does not change to reflect these new changes.

In my view, either the directive needs to be fixed so that it updates the model when the document is changed; or the documentation needs to be updated to clarify the section re: "play nice with ng-model"; explaining to the user how to get the data out of the document.

I wasted two hours trying to get this working with no any success.
As you can see, there is no PHP parsing or coloring:
http://plnkr.co/edit/PFJmbg88ipc7hKMtYUm4?p=preview

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);

@

Case:

When using the codemirror directive within AngularUI Bootstrap 0.11.1 modals, the editor does not show up (only the gutter is shown). After clicking on the area where the editor should have shown, it loads and is displayed properly. I tweaked the plunker from the modal issue and updated only the ui-bootstrap dependency: http://plnkr.co/edit/CUYbg2COJZtPU07QCj88?p=preview

It doesn't work when it's loaded inside ng-show. However, it does work with ng-if.