Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
answer or suggestion : How to get the data from a directive field type
<!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
You can’t perform that action at this time.