binding data from same object to same multiple directive - angularjs

Question

Hello I am little confused about how can I bind the same directive with different data from the same object
(function () {
'use strict';
angular.module('app', [])
.controller('appController', appController)
.directive('userForm', userForm);
/**#Injectable*/
function appController($http) {
let vm = this;
vm.user = {
userName: 'Test User',
email: 'test#gmail.com',
number: '1456',
address: 'zyz',
state: 'abcd',
city: 'xyz'
};
}
function userForm() {
return {
restrict: 'E',
scope: {
data:'='
},
templateUrl: 'public/app/form.directive.html',
controller: 'appController',
link: function (scope, attr, element) {
}
}
}
})();
<legend>{{headerLabel}}</legend>
<div class="form-group">
<label class="col-sm-3 control-label" for="textinput">{{label1.label1}}</label>
<div class="col-sm-9">
<input type="text" ng-model="data.userName" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="textinput">{{label2}}</label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="email">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="textinput">{{label3}}</label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="number">
</div>
</div>
<!--Main Index -->
<user-form data="vm.user"></user-form>
<user-form data="vm.user"></user-form>
Here I have used same directive two times and I want to bind the first directive with personal info like username, email and second directive should bind with address info.Is it possible to do this?

Answer 1

I wonder why you would want to do that, using a directive for two different purposes. I suggest creating 2 different directives for it. If you still want it, you can have a logic inside link in the directive function to perform different logics. Its not very elegant, but what you asked for is not either(imho)
(function () {
'use strict';
angular.module('app', [])
.controller('appController', appController)
.directive('userForm', userForm);
/**#Injectable*/
function appController($http) {
let vm = this;
vm.user = {
userName: 'Test User',
email: 'test#gmail.com',
number: '1456',
address: 'zyz',
state: 'abcd',
city: 'xyz'
};
}
function userForm() {
return {
restrict: 'E',
scope: {
data:'=',
type:'#'
},
templateUrl: 'public/app/form.directive.html',
controller: 'appController',
link: function (scope, attr, element) {
switch(scope.type){
case 'name_info':
//logic for name based info
break;
case 'address_info':
//logic for address based info
break;
default:
}
}
}
}
})();
<legend>{{headerLabel}}</legend>
<div class="form-group">
<label class="col-sm-3 control-label" for="textinput">{{label1.label1}}</label>
<div class="col-sm-9">
<input type="text" ng-model="data.userName" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="textinput">{{label2}}</label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="email">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="textinput">{{label3}}</label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="number">
</div>
</div>
<user-form data="vm.user" type="name_info"></user-form>
<user-form data="vm.user" type="address_info"></user-form>