Last active
September 17, 2015 20:13
-
-
Save MacKentoch/66be9ccfeb81c9c211e9 to your computer and use it in GitHub Desktop.
answer or suggestion : How to get the data from a directive field type
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment