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-app='myApp'>
<!--[if lt IE 10]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h3 class="text-muted">angular router</h3>
</div>
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">Always a pleasure scaffolding your apps.</p>
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>HTML5 Boilerplate</h4>
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
<h4>Sass</h4>
<p>Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.</p>
<h4>Bootstrap</h4>
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
<h4>Modernizr</h4>
<p>Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.</p>
</div>
</div>
<div ui-ace="{
useWrapMode : true,
showGutter: true,
theme:'dawn',
mode: 'xml',
firstLineNumber: 5,
onLoad: aceLoaded,
onChange: aceChanged
}" ng-controller='MainCtrl'>
class A \n
clas B \n
clas B \n
clas B \n
clas B \n
clas B \n
clas B \n
clas B \n
clas B \n
clas B \n
clas B \n
clas B \n
a afasdf
af asdf
a
sfasdfas
dfadfasdf
afasdf
adfasdf
adfasdf
asdfasd
asdfasf
afsdasdf
asdfasdf
dsfasdf
asdfasdf
asdfasdf
adsfasdf
adfasdf
asdfasdfasdfaasdf
adsfasdfasf
adsfasdfasdf
asdfasdfasdf
asdfasdfasdf
adsfasadfasdfasdf
clas B \n
clas B \n
clas B \nclas B \nclas B \n
clas B \nclas B \n
clas B \nclas B \nclas B \n
clas B \nclas B \nclas DDDDD \n
</div>
<div class="footer">
<p>♥ from the Yeoman team</p>
</div>
</div>
</body>
</html>
body {
padding: 20px;
}
.ace_editor { height: 600px; }