angular-schema-form/examples/builder2.html at development · json-schema-form/angular-schema-form · GitHub

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
76
<!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="../bower_components/tv4/tv4.js" charset="utf-8"></script>
    <script src="../dist/angular-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>