MacKentoch/angular formly contains angular formly.html

## angular formly contains angular formly.html
<!DOCTYPE html>
<html>

  <head>
    <!-- Twitter bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

    <!-- apiCheck is used by formly to validate its api -->
    <script src="https://rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.js"></script>
    <!-- This is the latest version of angular (at the time this template was created) -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>

    <!-- This is the current state of master for formly core. -->
    <script src="https://rawgit.com/formly-js/angular-formly/latest/dist/formly.js"></script>
    <!-- This is the current state of master for the bootstrap templates -->
    <script src="https://rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.js"></script>

  </head>

  <body ng-app="formlyExample" ng-controller="MainCtrl as vm">
    <div>

      <form ng-submit="vm.onSubmit()" name="vm.formName" novalidate>
        <formly-form model="vm.model" fields="vm.formFields" form="vm.formName">
          <button type="submit" class="btn btn-primary submit-button">Submit</button>
        </formly-form>
      </form>
    </div>

    <div style="margin-top:30px">
      <small>

      <br />
      <h2>Model Value</h2>

      <pre>{{vm.model | json}}</pre>
      <h2>Fields</h2>

      <pre>{{vm.formFields | json}}</pre>
      <h2>Form</h2>

      <pre>{{vm.formName | json}}</pre>

      </small>
    </div>
    <!-- Put custom templates here -->


    <script type="text/ng-template" id="example-directive.html">
      <div class="form-group" >
        <formly-form model="role.roleModel" fields="role.roleFields" form="innerForm" >
        </formly-form>
      </div>
    </script>

		<!--app-->
		<script>

			/* global angular */
			(function() {
				'use strict';

				var app = angular.module('formlyExample', ['formly', 'formlyBootstrap'], function config(formlyConfigProvider) {
					// set templates here

					/**
					 * When you need to create a new type, better user formlyConfigProvider in your app.config
					 *  -> more reusable
					 *  -> more readable
					 *  -> it was (I guess) a bit of work to provide us a provider that make custom type easier -> so use it
					 */
						formlyConfigProvider.setType(
							{
								name: 'exampleDirective',
								template: '<div example-directive dir-role-model="model[options.key || index]"></div>'
							}
						);
				});


				app.controller('RolesCtrl', function RolesCtrl(formlyVersion) {
					var role = this;

					role.roleModel = {};
					role.roleFields = [
							{key:'test',
							type:'input',
							templateOptions:{
								label:'InnerFieldTest',
								required: true
							}
							},
						{key:'test2',
							type:'input',
							templateOptions:{
								label:'InnerFieldTest2',
								required: true
							}
							}
						];
				});


				app.controller('MainCtrl', function MainCtrl(formlyVersion) {
					var vm = this;
					// funcation assignment
					vm.onSubmit = onSubmit;


					// variable assignment
					vm.author = { // optionally fill in your info below :-)
						name: 'Kent C. Dodds',
						url: 'https://twitter.com/kentcdodds' // a link to your twitter/github/blog/whatever
					};
					vm.exampleTitle = 'Introduction';
					vm.env = {
						angularVersion: angular.version.full,
						formlyVersion: formlyVersion
					};

					vm.model = {};

					vm.formFields = [
						{
							key: 'exampleDirectiveKey',
							type : 'exampleDirective',
							templateOptions: {
								required: true,
								label: 'Example Directive'
							}
						},
							{key:'outerTest',
							type:'input',
							templateOptions:{
								label:'OuterFieldTest',
								required: true
							}
							}
					];

					// function definition
					function onSubmit() {
						alert(JSON.stringify(vm.model), null, 2);
					}
				});


				app.directive('exampleDirective', function() {
					return {
						scope :{
							dirRoleModel : '='
						},
						templateUrl: 'example-directive.html',
						controllerAs : 'role',
						controller : 'RolesCtrl',
						link : function(scope, element, attrs){

							/**
							 * no use : just to log (as illustration) that
							 * dirRoleModel is bound to role.roleModel
							 */
							// scope.$watch('dirRoleModel', function(newVal, oldVal){
							// 	if(newVal !== oldVal){
							// 		console.log('new val : dirRoleModel');
							// 	}
							// }, true);


							scope.$watch(function(){return scope.role.roleModel}, function(newVal, oldVal){
								if(newVal !== oldVal){
									console.log('new val : role.roleModel');
									/**
									 * "role.roleModel"" is the "dataModel"" of "RolesCtrl"
									 * Now, we need to pass this model to "MainCtrl", for that
									 * 1- just pass model to "dirRoleModel" (or dir-role-model attribute in html)
									 * 2- since (thanks to) double data binding : scope: { dirRoleModel : '=' }
									 * 3- MainCtrl will be updated thanks to template: "...dir-role-model="model[options.key || index]"></div>"
									 */
									scope.dirRoleModel = newVal;
								}
							}, true);


						}


					};
				});
			})();

		</script>
  </body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<!-- Twitter bootstrap -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

	<!-- apiCheck is used by formly to validate its api -->
	<script src="https://rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.js"></script>
	<!-- This is the latest version of angular (at the time this template was created) -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>

	<!-- This is the current state of master for formly core. -->
	<script src="https://rawgit.com/formly-js/angular-formly/latest/dist/formly.js"></script>
	<!-- This is the current state of master for the bootstrap templates -->
	<script src="https://rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.js"></script>

	</head>

	<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
	<div>

	<form ng-submit="vm.onSubmit()" name="vm.formName" novalidate>
	<formly-form model="vm.model" fields="vm.formFields" form="vm.formName">
	<button type="submit" class="btn btn-primary submit-button">Submit</button>
	</formly-form>
	</form>
	</div>

	<div style="margin-top:30px">
	<small>

	<br />
	<h2>Model Value</h2>

	<pre>{{vm.model \| json}}</pre>
	<h2>Fields</h2>

	<pre>{{vm.formFields \| json}}</pre>
	<h2>Form</h2>

	<pre>{{vm.formName \| json}}</pre>

	</small>
	</div>
	<!-- Put custom templates here -->


	<script type="text/ng-template" id="example-directive.html">
	<div class="form-group" >
	<formly-form model="role.roleModel" fields="role.roleFields" form="innerForm" >
	</formly-form>
	</div>
	</script>

	<!--app-->
	<script>

	/* global angular */
	(function() {
	'use strict';

	var app = angular.module('formlyExample', ['formly', 'formlyBootstrap'], function config(formlyConfigProvider) {
	// set templates here

	/**
	* When you need to create a new type, better user formlyConfigProvider in your app.config
	* -> more reusable
	* -> more readable
	* -> it was (I guess) a bit of work to provide us a provider that make custom type easier -> so use it
	*/
	formlyConfigProvider.setType(
	{
	name: 'exampleDirective',
	template: '<div example-directive dir-role-model="model[options.key \|\| index]"></div>'
	}
	);
	});


	app.controller('RolesCtrl', function RolesCtrl(formlyVersion) {
	var role = this;

	role.roleModel = {};
	role.roleFields = [
	{key:'test',
	type:'input',
	templateOptions:{
	label:'InnerFieldTest',
	required: true
	}
	},
	{key:'test2',
	type:'input',
	templateOptions:{
	label:'InnerFieldTest2',
	required: true
	}
	}
	];
	});


	app.controller('MainCtrl', function MainCtrl(formlyVersion) {
	var vm = this;
	// funcation assignment
	vm.onSubmit = onSubmit;


	// variable assignment
	vm.author = { // optionally fill in your info below :-)
	name: 'Kent C. Dodds',
	url: 'https://twitter.com/kentcdodds' // a link to your twitter/github/blog/whatever
	};
	vm.exampleTitle = 'Introduction';
	vm.env = {
	angularVersion: angular.version.full,
	formlyVersion: formlyVersion
	};

	vm.model = {};

	vm.formFields = [
	{
	key: 'exampleDirectiveKey',
	type : 'exampleDirective',
	templateOptions: {
	required: true,
	label: 'Example Directive'
	}
	},
	{key:'outerTest',
	type:'input',
	templateOptions:{
	label:'OuterFieldTest',
	required: true
	}
	}
	];

	// function definition
	function onSubmit() {
	alert(JSON.stringify(vm.model), null, 2);
	}
	});




	app.directive('exampleDirective', function() {
	return {
	scope :{
	dirRoleModel : '='
	},
	templateUrl: 'example-directive.html',
	controllerAs : 'role',
	controller : 'RolesCtrl',
	link : function(scope, element, attrs){

	/**
	* no use : just to log (as illustration) that
	* dirRoleModel is bound to role.roleModel
	*/
	// scope.$watch('dirRoleModel', function(newVal, oldVal){
	// if(newVal !== oldVal){
	// console.log('new val : dirRoleModel');
	// }
	// }, true);


	scope.$watch(function(){return scope.role.roleModel}, function(newVal, oldVal){
	if(newVal !== oldVal){
	console.log('new val : role.roleModel');
	/**
	* "role.roleModel"" is the "dataModel"" of "RolesCtrl"
	* Now, we need to pass this model to "MainCtrl", for that
	* 1- just pass model to "dirRoleModel" (or dir-role-model attribute in html)
	* 2- since (thanks to) double data binding : scope: { dirRoleModel : '=' }
	* 3- MainCtrl will be updated thanks to template: "...dir-role-model="model[options.key \|\| index]"></div>"
	*/
	scope.dirRoleModel = newVal;
	}
	}, true);


	}


	};
	});
	})();

	</script>
	</body>

	</html>