<!DOCTYPE html>
<html ng-app="x">
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8" />
<title>Codemirror in modal demo</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<!-- css -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://codemirror.net/lib/codemirror.css"/>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- /css -->
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Codemirror in modal demo</h1>
</div>
</div>
<section ng-controller="xCtrl as xCtrl">
<div class="container">
<button class="btn btn-block btn-default" ng-click="xCtrl.open()">Edit me in a modal !</button>
<div ui-codemirror="{
lineWrapping : true,
lineNumbers: true,
readOnly: 'nocursor',
mode: 'xml',
}" ng-model="xCtrl.fooCode"></div>
</div>
</section>
<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/scheme/scheme.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/ui-codemirror/v0.1.4/ui-codemirror.js"></script>
<script src="app.js"></script>
<!-- /js -->
</body>
</html>
angular.module('x', ['ui.codemirror', 'ui.bootstrap'])
.controller('xCtrl', function($modal) {
var xCtrl = {};
xCtrl.fooCode = '<!DOCTYPE html>\n<html lang="en">\n lorem ipsum\n</html>';
xCtrl.open = function() {
var modalInstance = $modal.open({
templateUrl: 'myCodemirrorModal.html',
controller: function($scope, $modalInstance, fooEditableCode) {
$scope.modal = {};
$scope.modal.fooEditableCode = fooEditableCode;
$scope.ok = function() {
$modalInstance.close($scope.modal.fooEditableCode);
};
$scope.cancel = $modalInstance.dismiss;
},
resolve: {
fooEditableCode: function() {
return xCtrl.fooCode;
}
}
});
modalInstance.result.then(function(fooEditableCode) {
xCtrl.fooCode = fooEditableCode;
});
};
return xCtrl;
})
.jumbotron {
position: relative;
font-size: 16px;
color: #fff;
color: rgba(255,255,255,.75);
text-align: center;
background-color: hsla(10, 50%, 50%,.75);
border-radius: 0;
}
# Codemirror in modal demo
<div class="modal-header">
<h3 class="modal-title">Edit the code here!</h3>
</div>
<div class="modal-body">
<div ui-codemirror="{
lineWrapping : true,
mode: 'xml',
}" ng-model="modal.fooEditableCode"></div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>