camwest / angular-ace

Ace Code Editor Directive for AngularJS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Usage

<!doctype html>

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="/ace.js"></script> <script src="/angular-ace.js"></script>
<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.

About

Ace Code Editor Directive for AngularJS

License:MIT License