<div class="client-view">
<label>First Name</label>
<input type="text" ng-model="user.first_name"/>
<label>Last Name</label>
<input type="text" ng-model="user.last_name"/>
<div ng-if="user.owner">
<label>Company</label>
<input type="text" ng-model="user.company_name"/>
</div>
<div ng-if="user.worker">
<label>Employers</label>
<div ng-repeat="employer in user.employers">
<input type="text" ng-model="employer"/>
<span ng-click="removeEmployer($index)">remove</span>
</div>
</div>
<label>E-mails</label>
<div ng-repeat="email in user.emails">
<input type="email" ng-model="email"/>
<span ng-click="removeEmail($index)">remove</span>
</div>
</div>
<div class="client-view">
<label>First Name</label>
<input type="text" ng-model="user.first_name"/>
<label>Last Name</label>
<input type="text" ng-model="user.last_name"/>
<user-types company="user.company" ctrl="userCtrl"></user-types>
<user-emails emails="user.emails" ctrl="userCtrl"></user-types>
</div>
<div>
<div ng-if="company.owner">
<label>Company</label><input type="text" ng-model="company.name"/>
</div>
<div ng-if="company.worker">
<label>Employers</label>
<div ng-repeat="employer in company.employers">
<input type="text" ng-model="employer"/>
<remove-button to-remove="ctrl.removeEmployer($index)"></remove-button>
</div>
</div>
</div>
<div>
<label>E-mails</label>
<div ng-repeat="email in emails">
<input type="email" ng-model="email"/>
<remove-button to-remove="ctrl.removeEmail($index)"><remove-button>
</div>
</div>
Pulling out repeated functionality.
<span ng-click="remove()">remove</span>
.directive('removeButton', [function() {
return {
controller: ['$scope', '$attrs', function($scope, $attrs) {
this.remove = function() {
$scope.$eval($attrs.toRemove);
};
}]
}
}])
.directive('userCompany', function() {
return {
scope: {company: '='},
controller: ['$scope', '$attrs', function($scope, $attrs) {
$scope.ctrl = $scope.$eval($attrs.ctrl);
}
}
})
.directive('userEmails', function() {
return {
scope: {emails: '='},
controller: ['$scope', '$attrs', function($scope, $attrs) {
$scope.ctrl = $scope.$eval($attrs.ctrl);
}
}
})