Skip to content

Commit 2f6b5b7

Browse files
rodikhrodikh
committed
added editor scope element and isValid scope element
added full submit demo example renamed to angular-json-editor
1 parent 4895d31 commit 2f6b5b7

File tree

6 files changed

+65
-46
lines changed

6 files changed

+65
-46
lines changed

‎.gitignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
/.idea
2-
/.sass-cache
32
/bower_components
4-
/build/**
53
/node_modules
6-
ssl.json
74

85
[Tt]humbs.db
96
*.DS_Store

‎README.md‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
JSON Editor Angular directive
22
=============================
33

4-
ng-json-editor is an angular module that provides a directive that wraps [jdorn's JSON Editor](https://github.com/jdorn/json-editor).
4+
angular-json-editor is an angular module that provides a directive that wraps [jdorn's JSON Editor](https://github.com/jdorn/json-editor).
55

6+
JSON Editor takes a JSON Schema and uses it to generate an HTML form.
67

8+
For further information about supported schema properties and usage, check out the original [JSON Editor repository](https://github.com/jdorn/json-editor).
79

810
Requirements
911
----------------
@@ -13,14 +15,14 @@ The module doesn't include the original json-editor code, but it is included in
1315
Installation
1416
------------
1517

16-
Install ng-json-editor using bower, which will install the source json-editor as well.
18+
Install angular-json-editor using bower, which will install the source json-editor as well.
1719

1820
If you are not using bower, please download the original [json-editor from here](https://github.com/jdorn/json-editor).
1921

2022
Usage
2123
-----
2224

23-
Include the json-editor and angular scripts first, and then include ng-json-editor.
25+
Include the json-editor and angular scripts first, and then include angular-json-editor.
2426

2527
There are two optional ways of passing a json schema to the editor.
2628

@@ -53,5 +55,19 @@ There are two optional ways of passing a json schema to the editor.
5355
* Use an external JSON file as the schema and pass the url using the schema-url attribute
5456

5557
```html
56-
<div json-editor="" schema-url='/schema/person.json></div>
57-
```
58+
<div json-editor="" schema-url="/schema/person.json"></div>
59+
```
60+
61+
The editor object that is returned from JSON-Editor can be made available to the scope by using the editor="" attribute.
62+
```html
63+
<div json-editor="schemaObj" editor="editor1"></div>
64+
```
65+
66+
### Validation
67+
The directive can attach an isValid property to the scope by using the is-valid attribute.
68+
```html
69+
<form>
70+
<div json-editor="schemaObj" editor="editor1" is-valid="isValid"></div>
71+
<input type="submit" ng-disabled="!isValid"
72+
</form>
73+
```

‎bower.json‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
{
2-
"name": "ng-json-editor",
2+
"name": "angular-json-editor",
33
"version": "0.0.1",
4-
"main": "app/ng-json-editor.js",
4+
"main": "src/angular-json-editor.js",
55
"dependencies": {
6-
"json-editor": "*"
7-
},
8-
"devDependencies": {
9-
"angular": "1.2.*"
6+
"json-editor": "*",
7+
"angular": "1.2.*"
108
}
119
}

‎demo/app.js‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,33 @@
11
'use strict';
22

3-
angular.module('demoApp', ['ngJsonEditor'])
3+
angular.module('demoApp', ['angular-json-editor'])
44
.controller('MyCtrl', function ($scope) {
55
$scope.ctrlSchema = {
6-
"type": "object",
7-
"properties": {
8-
"name": {
9-
"type": "string",
10-
"title": "Item Name",
11-
"required": true,
12-
"minLength": 1
6+
type: 'object',
7+
properties: {
8+
name: {
9+
type: 'string',
10+
title: 'Item Name',
11+
required: true,
12+
minLength: 1
1313
},
14-
"age": {
15-
"type": "integer",
16-
"title": "Age",
17-
"required": true,
18-
"min": 0
14+
age: {
15+
type: 'integer',
16+
title: 'Age',
17+
required: true,
18+
min: 0
1919
}
2020
}
2121
};
2222

2323
$scope.startval = {
2424
age: 20
2525
};
26+
27+
$scope.onSubmit = function () {
28+
var formData = $scope.editor.getValue();
29+
console.log('formData', formData);
30+
};
2631
});
2732

2833
angular.element(window.document).ready(function () {

‎demo/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88
</head>
99
<body>
1010
<div class="container" ng-controller="MyCtrl">
11-
<form>
12-
<div json-editor="" schema-url="schema.json" startval="startval"></div>
13-
<input type="submit" value="Submit">
11+
<form ng-submit="onSubmit()">
12+
<div json-editor="ctrlSchema" startval="startval" editor="editor" is-valid="isValid"></div>
13+
<input type="submit" value="Submit" ng-disabled="!isValid">
1414
</form>
1515
</div>
1616

1717
<script src="../bower_components/angular/angular.js"></script>
1818
<script src="../bower_components/json-editor/dist/jsoneditor.js"></script>
19-
<script src="../src/ng-json-editor.js"></script>
19+
<script src="../src/angular-json-editor.js"></script>
2020
<script src="../demo/app.js"></script>
2121
</body>
2222
</html>

‎src/ng-json-editor.js‎ renamed to ‎src/angular-json-editor.js‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
'use strict';
22

3-
angular.module('ngJsonEditor', [])
3+
angular.module('angular-json-editor', [])
44
.directive('jsonEditor', function () {
55
return {
66
restrict: 'A',
77
scope: {
88
startval: '=',
99
jsonEditor: '=',
10-
schemaUrl: '@'
10+
schemaUrl: '@',
11+
editor: '=',
12+
isValid: '='
1113
},
1214
link: function (scope, element, attrs) {
13-
//TODO: make this configurable
1415
var config = {
1516
startval: scope.startval,
1617
iconlib: attrs.iconlib || 'bootstrap3',
1718
theme: attrs.theme || 'bootstrap3'
18-
}
19+
};
1920

2021
if (scope.jsonEditor) {
2122
config.schema = scope.jsonEditor;
@@ -33,21 +34,23 @@ angular.module('ngJsonEditor', [])
3334
var editor = new JSONEditor(element[0], config);
3435

3536
// Attach the editor object to the parent scope, for easy access from a controller.
36-
if (scope.$parent && attrs.editor) {
37-
scope.$parent[attrs.editor] = editor;
37+
if (attrs.editor) {
38+
scope.editor = editor;
3839
}
3940

4041
// scope.isValid holds the validation state of the entire form.
4142
// it is useful for disabling the submit button while the form isn't valid.
42-
scope.isValid = false;
43-
editor.on('ready', function () {
44-
scope.isValid = (editor.validate().length === 0);
45-
editor.on('change', function () {
46-
scope.$apply(function () {
47-
scope.isValid = (editor.validate().length === 0);
48-
});
49-
});
50-
});
43+
if (attrs.isValid) {
44+
scope.isValid = false;
45+
editor.on('ready', function () {
46+
scope.isValid = (editor.validate().length === 0);
47+
editor.on('change', function () {
48+
scope.$apply(function () {
49+
scope.isValid = (editor.validate().length === 0);
50+
});
51+
});
52+
});
53+
}
5154
}
5255
};
5356
});

0 commit comments

Comments
 (0)