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