1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<!DOCTYPE html>
<html ng-app="builderExample">
<head>
<meta charset="utf-8">
<title>Builder example</title>
</head>
<body>
<div custom-build></div>
<script src="../bower_components/angular/angular.js" charset="utf-8"></script>
<script src="../dist/schema-form.js" charset="utf-8"></script>
<script src="../bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript">
angular.module('builderExample', ['schemaForm'])
.run(function($templateCache) {
// A template to use
$templateCache.put('example-template.html', '<h1>Hello {{world}}</h1>');
$templateCache.put('fieldset-template.html', '<fieldset><legend>Legend</legend></fieldset>');
})
.directive('customBuild', function($compile, sfBuilder) {
return {
link: function(scope, element, attrs) {
scope.world = 'World';
// First a "canonical form definition", usually this is created by merging form
// definition from user and a schema.
// This time its a nested structure with a fieldset around our example type
var formDef = [
{
type: 'fieldset',
items: [{type: 'example'}]
}
];
// A "builder", i.e. a helper function to get the fieldset to actually contain its
// children.
var fieldsetBuilder = function(args) {
// The `args` options object contains lot's of useful stuff, the form definition,
// the documentFragment of the current template, and a builder function to call
// when recursively building children.
// We access the form definition through args.form, and we've put our children
// under "items", so we call the builder recursively to build them.
var children = args.build(args.form.items);
// What we get is documentFragment that we plop inside the fieldset.
args.fieldFrag.firstChild.appendChild(children);
};
// A decorator is just an object that matches form `type` to a metadata object
// `replace` property is a boolean, if false the "old" way to build forms is
// used for backwards compatability.
// `builder` is a function or a list of helper functions to manipulate the DOM during the build.
// For example to set proper ng-model value, or include child items
var decorator = {
example: {template: 'example-template.html', replace: true, builder: []},
fieldset: {template: 'fieldset-template.html', replace: true, builder: fieldsetBuilder},
};
// The builder creates a nice document fragment for you to place in the form.
var documentFragment = sfBuilder.build(formDef, decorator);
// Then plop the fragment into the element
element[0].appendChild(documentFragment);
// It isn't compiled yet though, so let's do that.
$compile(element.children())(scope);
}
};
});
</script>
</body>
</html>
|
