Merge pull request #2 from topaz1008/master

Refactored buttons controller to an attribute on json-editor

Author: rodikh

README.md

@@ -22,8 +22,8 @@ Install via bower
 Then include the directive and json-editor in your html (you can also use the minified versions)
 
 ```html
-    <script src="bower_components/json-editor/dist/jsoneditor.js"></script>
-    <script src="bower_components/angular-json-editor/angular-json-editor.js"></script>
+<script src="bower_components/json-editor/dist/jsoneditor.js"></script>
+<script src="bower_components/angular-json-editor/angular-json-editor.js"></script>
 ```
 
 Usage

demo/app.js

@@ -6,9 +6,6 @@ angular.module('demoApp', ['angular-json-editor']).config(function (JsonEditorCo
     JsonEditorConfig.iconlib = 'bootstrap3';
     JsonEditorConfig.theme = 'bootstrap3';
 
-    // Configure the buttons controller
-    JsonEditorConfig.controller = 'ButtonsController';
-
 }).controller('SyncAppController', function ($scope) {
 
     $scope.mySchema = {
@@ -44,20 +41,26 @@ angular.module('demoApp', ['angular-json-editor']).config(function (JsonEditorCo
             age: 20
         };
 
-    }, 2000);
+    }, 1500);
 
-}).controller('ButtonsController', function ($scope) {
+}).controller('SyncButtonsController', function ($scope) {
 
     /**
      * Custom actions controller which allows you to add any other buttons/actions to the form.
      */
 
     $scope.onSubmit = function () {
-        console.log('onSubmit Data', $scope.editor.getValue());
+        console.log('onSubmit data in sync controller', $scope.editor.getValue());
     };
 
     $scope.onAction2 = function () {
         console.log('onAction2');
     };
 
+}).controller('AsyncButtonsController', function ($scope) {
+
+    $scope.onSubmit = function () {
+        console.log('onSubmit data in async controller', $scope.editor.getValue());
+    };
+
 });

demo/index.html

@@ -12,7 +12,7 @@
 
 <h2>Synchronous values</h2>
 <div class="container" ng-controller="SyncAppController">
-    <json-editor schema="mySchema" startval="myStartVal" editor="myEditor">
+    <json-editor schema="mySchema" startval="myStartVal" buttons-controller="SyncButtonsController">
 
         <button type="submit" class="btn btn-success" ng-click="onSubmit($event)" ng-disabled="!isValid">
             <span class="glyphicon glyphicon-check"></span>
@@ -29,7 +29,7 @@ <h2>Synchronous values</h2>
 
 <h2>Asynchronous values</h2>
 <div class="container" ng-controller="AsyncAppController">
-    <json-editor schema="mySchema" startval="myStartVal" editor="myEditor">
+    <json-editor schema="mySchema" startval="myStartVal" buttons-controller="AsyncButtonsController">
 
         <button type="submit" class="btn btn-success" ng-click="onSubmit($event)" ng-disabled="!isValid">
             <span class="glyphicon glyphicon-check"></span>
@@ -42,6 +42,7 @@ <h2>Asynchronous values</h2>
 <script src="../bower_components/json-editor/dist/jsoneditor.js"></script>
 <script src="../bower_components/angular/angular.js"></script>
 <script src="../src/angular-json-editor.js"></script>
+<!--<script src="../dist/angular-json-editor.min.js"></script>-->
 <script src="app.js"></script>
 
 </body>

dist/angular-json-editor.min.js

@@ -2,8 +2,7 @@
 
 angular.module('angular-json-editor', []).constant('JsonEditorConfig', {
     iconlib: 'bootstrap3',
-    theme: 'bootstrap3',
-    controller: angular.noop
+    theme: 'bootstrap3'
 
 }).directive('jsonEditor', ['$q', 'JsonEditorConfig', function ($q, JsonEditorConfig) {
 
@@ -13,9 +12,27 @@ angular.module('angular-json-editor', []).constant('JsonEditorConfig', {
         scope: {
             schema: '=',
             startval: '=',
-            editor: '='
+            buttonsController: '@'
         },
-        controller: JsonEditorConfig.controller,
+        controller: ['$scope', '$attrs', '$controller', function ($scope, $attrs, $controller) {
+
+            var controller, controllerScope, controllerName = $attrs.buttonsController;
+            if (angular.isString(controllerName) && controllerName !== '') {
+                controllerScope = {
+                    $scope: $scope
+                };
+
+                try {
+                    controller = $controller(controllerName, controllerScope);
+                } catch (e) {
+                    // Any exceptions thrown will probably be because the controller specified does not exist
+                    throw new Error('json-editor: buttons-controller attribute must be a valid controller.');
+                }
+            } else {
+                throw new Error('json-editor: buttons-controller attribute must be specified.');
+            }
+
+        }],
         link: function (scope, element, attrs, controller, transclude) {
             var valueToResolve,
                 startValPromise = $q.when({}),