angular-ace

Ace Code Editor Directive for AngularJS

Added by: Sam Deering

GitHub

Repository

camwest/angular-ace

Stats

Stars: 17

Watchers: 17

Forks: 11

Module Description

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.

Module stats last updated: 2017-12-08 15:00:05

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!