Does not work in modal with AngularUI Bootstrap 0.11.1

[vanto]

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

[vanto]

The breaking change has apparently been introduced in 0.11.1. With 0.11.0 it still works as expected.

[sheymann]

It still doesn't work in AngularUI Boostrapt 0.13.0

[sheymann]

Workaround:

function MyModalCtrl($modalInstance){
    var codemirrorInstance = null;

    this.codemirrorOptions = {
      ...
      onLoad: function(cmInstance) {
          codemirrorInstance = cmInstance;
      }
    };

    setTimeout(function() {
        codemirrorInstance .refresh();
    }, 0);
}
angular.module('myModule').controller('MyModalCtrl', MyModalCtrl);

then in the HTML (assuming you use controllerAs):

<ui-codemirror ng-model="MyModalCtrl.model" 
ui-codemirror-opts="MyModalCtrl.codemirrorOptions"></ui-codemirror>

[agibson-fl]

We duplicated this problem with this and I believe it is due to conditional visibility on container elements. Here's a plunkr showing this problem without using modals and just using conditional visibility. In our app, we have a conditionally visible area with a codemirror element in it, and then we have a button to expand it into a larger modal. BOTH areas showed this problem. We could fix the area that wasn't using a bootstrap modal by changing the containers with ng-show's and ng-hide's to ng-if's but this leaves the bootstrap problem. The bootstrap modal and our code both have the conditionally hidden elements in common.

For this reason, I don't think it's a bootstrap problem but rather a conditional visibility issue. I almost didn't find this issue because of the naming.

I tried the above workaround suggested by @sheymann, but couldn't get it to work.

[sheymann]

@agibson-fl what is your version of Angular? I've tested on v1.3.16 and Angular-UI v0.13.0.

[agibson-fl]

@sheymann The plunkr I posted is using Angular v1.2.6. But our codebase is using v1.3.13. The ui-bootstrap version is 0.13. The same problem occurs. But again, I think this problem is not one with ui-bootstrap specifically but rather the visibility settings of the elements that contain the ui-codemirror element.