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
|
<!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>');
})
.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.
var formDef = [
{type: 'example'}
];
// 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: []}
};
// 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>
|
