Skip to content

Commit 4895d31

Browse files
rodikhrodikh
committed
added configuration
added comments changed scope variables added option to pass schema as scope object
1 parent ccd64a7 commit 4895d31

File tree

6 files changed

+118
-61
lines changed

6 files changed

+118
-61
lines changed

‎README.md‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,36 @@ Usage
2222

2323
Include the json-editor and angular scripts first, and then include ng-json-editor.
2424

25-
Use the json-editor directive with a path to the schema you want to use.
26-
27-
```html
28-
<div json-editor="schema/schema_path.json"></div>
29-
```
25+
There are two optional ways of passing a json schema to the editor.
26+
27+
* Pass the schema using a scope object as the value of the directive's attribute
28+
29+
```js
30+
.controller('MyCtrl', function ($scope) {
31+
$scope.schemaObj = {
32+
"type": "object",
33+
"properties": {
34+
"name": {
35+
"type": "string",
36+
"required": true,
37+
"minLength": 1
38+
},
39+
"age": {
40+
"type": "integer",
41+
"title": "Age",
42+
"min": 0
43+
}
44+
}
45+
};
46+
}
47+
```
48+
49+
```html
50+
<div json-editor="schemaObj"></div>
51+
```
52+
53+
* Use an external JSON file as the schema and pass the url using the schema-url attribute
54+
55+
```html
56+
<div json-editor="" schema-url='/schema/person.json></div>
57+
```

‎app/ng-json-editor.js‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎bower.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"name": "ng-json-editor",
33
"version": "0.0.1",
4+
"main": "app/ng-json-editor.js",
45
"dependencies": {
56
"json-editor": "*"
67
},

‎demo/app.js‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,29 @@
11
'use strict';
22

3-
angular.module('demoApp', ['ngJsonEditor']);
3+
angular.module('demoApp', ['ngJsonEditor'])
4+
.controller('MyCtrl', function ($scope) {
5+
$scope.ctrlSchema = {
6+
"type": "object",
7+
"properties": {
8+
"name": {
9+
"type": "string",
10+
"title": "Item Name",
11+
"required": true,
12+
"minLength": 1
13+
},
14+
"age": {
15+
"type": "integer",
16+
"title": "Age",
17+
"required": true,
18+
"min": 0
19+
}
20+
}
21+
};
22+
23+
$scope.startval = {
24+
age: 20
25+
};
26+
});
427

528
angular.element(window.document).ready(function () {
629
angular.bootstrap(window.document, ['demoApp']);

‎demo/index.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,19 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
66
<meta name="author" content="Rodik">
7+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
78
</head>
89
<body>
9-
<div>
10-
Test
11-
<div json-editor="schema.json"></div>
10+
<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">
14+
</form>
1215
</div>
1316

1417
<script src="../bower_components/angular/angular.js"></script>
1518
<script src="../bower_components/json-editor/dist/jsoneditor.js"></script>
16-
17-
<script src="../app/ng-json-editor.js"></script>
18-
19+
<script src="../src/ng-json-editor.js"></script>
1920
<script src="../demo/app.js"></script>
2021
</body>
2122
</html>

‎src/ng-json-editor.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
'use strict';
2+
3+
angular.module('ngJsonEditor', [])
4+
.directive('jsonEditor', function () {
5+
return {
6+
restrict: 'A',
7+
scope: {
8+
startval: '=',
9+
jsonEditor: '=',
10+
schemaUrl: '@'
11+
},
12+
link: function (scope, element, attrs) {
13+
//TODO: make this configurable
14+
var config = {
15+
startval: scope.startval,
16+
iconlib: attrs.iconlib || 'bootstrap3',
17+
theme: attrs.theme || 'bootstrap3'
18+
}
19+
20+
if (scope.jsonEditor) {
21+
config.schema = scope.jsonEditor;
22+
23+
} else if (attrs.schemaUrl) {
24+
config.ajax = true;
25+
config.schema = {
26+
$ref: scope.schemaUrl
27+
};
28+
29+
} else {
30+
console.error('no schema specified.');
31+
}
32+
33+
var editor = new JSONEditor(element[0], config);
34+
35+
// 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;
38+
}
39+
40+
// scope.isValid holds the validation state of the entire form.
41+
// 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+
});
51+
}
52+
};
53+
});

0 commit comments

Comments
 (0)