ace + angular

angular-ace.coffee

AceEditor = angular.module('AceEditor', [])
AceEditor.controller 'EditorCtrl', ['$scope', 'editorSession', ($scope, editorSession) ->
  $scope.editing = editorSession.editing
  $scope.editors = editorSession.editors
  $scope.sanitize = editorSession.sanitize
]

codeFetchFactory = (editor) ->
  ->
    editor.getSession().getDocument().getValue()

AceEditor.directive 'editor', ($sce, editorSession) ->
  restrict: 'E'
  scope: {
    target: "@id"
    theme: "@"
    syntax: "@"
  }
  templateUrl: 'editor.html'
  link: (scope, el, attrs) ->
    scope.file = scope.$parent.file
    wrapper = el.find('.editor-wrapper')[0]

    # only watch for file changes if we're specifying source
    if attrs.sourceFile
      scope.$watch (->
        editorSession.editing.files), ->
          scope.file = editorSession.editing.files[attrs.sourceFile]

    # load the editor once we have a file to load
    # ensures the editor loads the content and doesn't destroy
    # anything specified in the html
    scope.$watch 'file', (file) ->
      ace.config.set('basePath', "/ace")
      editor = ace.edit(wrapper)
      editor.setTheme("ace/theme/#{scope.theme}")
      editor.getSession().setMode("ace/mode/#{scope.syntax}")

      return unless file

      editorSession.editors[file.filename] = codeFetchFactory(editor)
      editor.setValue(scope.file.content, -1)

app.coffee

window.AceEditor = angular.module('AceEditor', [])
AceEditor.config ($provide) ->
  $provide.factory 'editorSession', ($sce) -> new EditorSession($sce)

demo.html

<editor id="code" ng-show="editing" mode="javascript" theme="monokai">
  var aceInAngular = true;
  console.log(aceInAngular);
</editor>

editor.html

<h2 class="filename">{{file.filename}}</h2>
<div class='editor-wrapper'>
	{{sanitize(file.content)}}
</div>

editor_session.coffee

class EditorSession
  _getValue: (string) ->
    if angular.isFunction(string) then string.call() else string

  sanitize: (string) ->
    @$sce.trustAsHtml @_getValue(string)

  editing: {
    files: {}
  }

  editors: {}

  wrapjs: (js) =>
    @sanitize("<script type='text/javascript'>#{@_getValue(js)}</script>")

window.EditorSession = EditorSession

Combines the awesomeness of Ace with the power of Angular.

<editor> tags ftw 🤘

looks like