angular-ace

angular-ace-directive
0 people use it
Author: 13664856?v=3 alfu32

angular-ace-directive

usage

include

<script src="./node_modules/angular-ace/dist/angular-ace.js"></script> or

<script src="./node_modules/angular-ace/dist/angular-ace.min.js"></script>

include 'angular.ace' as dependecy in your module declaration

angular.module('my.application.module',['angular.ace'])

use the directive

<div ace-editor ace-config="{setTheme:'monokay',setMode:'ace/mode/javascript'}"></div>

the directive supports ng-model so you can

<div ng-controller="myController as vm"> <div ace-editor ace-config="vm.frontendEditorSettings" ng-model="vm.frontendCode"></div> <div ace-editor ace-config="vm.backendEditorSettings" ng-model="vm.backendCode"></div> </div>

having

angular.module('mymodule').controller('myController',function($scope){ var vm=this; vm.frontendEditorSettings={setTheme:'monokay',setMode:'ace/mode/html'}; vm.backendEditorSettings={setTheme:'monokay',setMode:'ace/mode/php'}; vm.frontendCode="<!-- your view here -->\n"; vm.backendCode="<?php \n/* your code here*/\n ?>"; })`

Options

$ace provider returns the ace namespace with added shortcuts :

  • themes shortcut for ace.require("ace/ext/modelist").themes
  • modes shortcut for ace.require("ace/ext/themelist").modes
comments powered by Disqus
This page was last updated 11 months ago.