lazy load ace editor source file - change to an isolated scope and don't rely on ngModel to get it working

src/Umbraco.Web.UI.Client/src/common/directives/components/umbaceeditor.directive.js

@@ -1,11 +1,7 @@
 (function() {
     'use strict';
 
-    function AceEditorDirective(umbAceEditorConfig, assetsService) {
-
-        if (angular.isUndefined(window.ace)) {
-            throw new Error('ui-ace need ace to work... (o rly?)');
-        }
+    function AceEditorDirective(umbAceEditorConfig, assetsService, angularHelper) {
 
         /**
          * Sets editor options such as the wrapping mode or the syntax checker.
@@ -128,6 +124,17 @@
 
         function link(scope, el, attr, ngModel) {
 
+            // Load in ace library
+            assetsService.loadJs('lib/ace-builds/src-min-noconflict/ace.js').then(function () {
+                if (angular.isUndefined(window.ace)) {
+                    throw new Error('ui-ace need ace to work... (o rly?)');
+                } else {
+                    // init editor
+                    init();
+                }
+            });
+
+            function init() {
 
                 /**
                  * Corresponds the umbAceEditorConfig ACE configuration.
@@ -139,7 +146,7 @@
                  * umbAceEditorConfig merged with user options via json in attribute or data binding
                  * @type object
                  */
-            var opts = angular.extend({}, options, scope.$eval(attr.umbAceEditor));
+                var opts = angular.extend({}, options, scope.umbAceEditor);
 
 
                 //load ace libraries here... 
@@ -229,17 +236,9 @@
                     onChange: function(callback) {
                         return function(e) {
                             var newValue = session.getValue();
-
-                        if (ngModel && newValue !== ngModel.$viewValue &&
-                            // HACK make sure to only trigger the apply outside of the
-                            // digest loop 'cause ACE is actually using this callback
-                            // for any text transformation !
-                            !scope.$$phase && !scope.$root.$$phase) {
-                            scope.$evalAsync(function() {
-                                ngModel.$setViewValue(newValue);
+                            angularHelper.safeApply(scope, function () {
+                                scope.model = newValue;
                             });
-                        }
-
                             executeUserCallback(callback, e, acee);
                         };
                     },
@@ -264,19 +263,8 @@
                 });
 
                 // Value Blind
-            if (ngModel) {
-                ngModel.$formatters.push(function(value) {
-                    if (angular.isUndefined(value) || value === null) {
-                        return '';
-                    } else if (angular.isObject(value) || angular.isArray(value)) {
-                        throw new Error('ui-ace cannot use an object or an array as a model');
-                    }
-                    return value;
-                });
-
-                ngModel.$render = function() {
-                    session.setValue(ngModel.$viewValue);
-                };
+                if(scope.model) {
+                    session.setValue(scope.model);
                 }
 
                 // Listen for option updates
@@ -284,7 +272,8 @@
                     if (current === previous) {
                         return;
                     }
-                opts = angular.extend({}, options, scope.$eval(attr.umbAceEditor));
+
+                    opts = angular.extend({}, options, scope.umbAceEditor);
 
                     opts.callbacks = [opts.onLoad];
                     if (opts.onLoad !== options.onLoad) {
@@ -312,7 +301,7 @@
                     setOptions(acee, session, opts);
                 };
 
-            scope.$watch(attr.umbAceEditor, updateOptions, /* deep watch */ true);
+                scope.$watch(scope.umbAceEditor, updateOptions, /* deep watch */ true);
 
                 // set the options here, even if we try to watch later, if this
                 // line is missing things go wrong (and the tests will also fail)
@@ -332,9 +321,14 @@
 
             }
 
+        }
+
         var directive = {
             restrict: 'EA',
-            require: '?ngModel',
+            scope: {
+                "umbAceEditor": "=",
+                "model": "="
+            },
             link: link
         };
 

src/Umbraco.Web.UI.Client/src/views/templates/edit.html

@@ -89,10 +89,9 @@
                 <div
                     auto-scale="85"
                     umb-ace-editor="vm.aceOption"
-                    ng-model="vm.template.content">
+                    model="vm.template.content">
                 </div>
 
-
             </umb-editor-container>
 
             <umb-editor-footer>

src/Umbraco.Web/UI/JavaScript/JsInitialize.js

@@ -16,7 +16,7 @@
     'lib/ng-file-upload/ng-file-upload.min.js',
     'lib/angular-local-storage/angular-local-storage.min.js',
 
-    "lib/ace-builds/src-min-noconflict/ace.js",
+    //"lib/ace-builds/src-min-noconflict/ace.js",
 
     'lib/bootstrap/js/bootstrap.2.3.2.min.js',
     'lib/bootstrap-tabdrop/bootstrap-tabdrop.js',