var app = angular.module('app', ['ui.ace']);
app.controller('MainCtrl', ['$scope','$timeout','$log', function ($scope,$timeout,console) {
var rows = $scope.rows = [];
var addRow = function(name,age,desc){rows.push({name:name,age:age,desc:desc});};
addRow("Bob",43,"My name \nis Bob");
addRow("Alice",42,"My name \nis Alice");
addRow("Jen",19,"My \nname \nis Jen");
addRow("Joe",22,"Hi, I'm Joe");
var editor;
$scope.loadValueData = function (_editor) {
editor = _editor;
editor.getSession().setUseWorker(false);
editor.setReadOnly(true);
};
var enableAndFocusEditor = function() {
if (editor) {
editor.focus();
var session = editor.getSession();
//Get the number of lines
var count = session.getLength();
//Go to end of the last line
editor.gotoLine(count, session.getLine(count-1).length);
editor.setReadOnly(false);
}
};
$scope.isModal = function (row) {
$scope.rowObj = row;
$timeout(enableAndFocusEditor,500);
//editor.setValue(row.getProperty('value').toString());
};
$scope.close = function() {
$scope.rowObj = null;
editor && editor.setReadOnly(true);
};
}]);
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.2.10" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script src="http://ace.c9.io/build/src/ace.js" charset="utf-8"></script>
<script src="https://rawgithub.com/angular-ui/ui-ace/master/src/ui-ace.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<table class="table table-striped">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Desc</td>
<td>edit</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td>{{row.name}}</td>
<td>{{row.age}}</td>
<td><pre>{{row.desc}}</pre></td>
<td>
<a ng-click="isModal(row)" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#valueModal" class="right">
<i class="glyphicon glyphicon-new-window"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="valueModal" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button id="mbx-procsr-properties-closeFile" type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="close()">X</button>
<h4 class="modal-title">Edit Value</h4>
</div>
<div class="modal-body">
<div ui-ace="{onLoad : loadValueData,
theme : 'chaos',
useWrapMode : true,
showGutter: true,
mode: 'json'
}" ng-model="rowObj.desc">
</div>
<div class="modal-footer">
<button id="mbx-procsr-properties-close" type="button" class="btn btn-default" data-dismiss="modal" ng-click="close()">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body {
padding: 20px;
}
.ace_editor { height: 200px; }