angular-ace

A directive for ace code editor

Purpose & Rationale

• Use ace code editor as if it was a textarea
• Make sure forms still submit properly with the right data
• Only submit / bind to scope when the syntax is correct

Installation

• require ace (https://github.com/ajaxorg/ace/)
• require angular (tested on 1.0.1)
• also requires jquery 1.7.2+ (for now)

Usage

<script>
  angular.module('myapp', ['ace']);
</script>

<style type='text/css'>
  /* MUST HAVE WIDTH/HEIGHT */
  .ace-editor {
    width:500px;
    height:500px;
  }

  #contents {
    width:500px;
    height:500px;
    position:absolute;
    left:500px;
    top:0;
  }
</style>

<div ace="json" ng-model="bitchin">
  <textarea name="tutorial[contents]"></textarea>
</div>

<div id="contents">
  Value: {{ bitchin }}
</div>

Copyright

Copyright (c) 2012 Cameron Westland. See LICENSE.txt for further details.