How to use same html but different model values in angular js? - angularjs

Question

I have a scenario in which html of the two partials is same but the model is different. For instance see the below code
<ul class="feeds">
<li ng-if="scleanerData.contact_no">
<div><i class="fa fa-phone color-grey" aria-hidden="true"></i></div>{{scleanerData.contact_no}}</li>
<li ng-if="scleanerData.email">
<div><i class="fa fa-envelope color-grey" aria-hidden="true"></i></div>{{scleanerData.email}}</li>
<li ng-if="scleanerData.address">
<div><i class="fa fa-globe color-grey" aria-hidden="true"></i></div>{{scleanerData.address}}</li>
</ul>
I need this same html in second partial but this time the bindings are like this
<ul class="feeds">
<li ng-if="profile.house">
<div><i class="fa fa-phone color-grey" aria-hidden="true"></i></div>{{profile.house}}</li>
<li ng-if="profile.email">
<div><i class="fa fa-envelope color-grey" aria-hidden="true"></i></div>{{profile.email}}</li>
<li ng-if="profile.home}">
<div><i class="fa fa-globe color-grey" aria-hidden="true"></i></div>{{profile.home}}</li>
</ul>
Is there any way so i can write the html once but the data binding works for both of them.

Answer 1

Create a custom directive with this html as template and having isolated scope. Use the directive where ever required and passing the model as input to that directive from different locations.
Below is the short example, that might help you.
define directive:
app.directive('myDirective', function(){
return {
restrict: 'E',
scope: {
contactInfo: '='
},
templateUrl: 'my-template.html',
link: function (scope,element,attrs,ctrl){
// you can manipulate your data / DOM here, if required.
}
}
})
associate a directive HTML:
<ul class="feeds">
<li ng-if="contactInfo.contact_no">
{{contactInfo.contact_no}}</li>
<li ng-if="contactInfo.email">
{{contactInfo.email}}</li>
<li ng-if="contactInfo.address">
{{contactInfo.address}}</li>
</ul>
use that directive in your main HTML:
<button ng-click="showInfo1 = true;showInfo2=false;">Show Info 1</button>
<button ng-click="showInfo2 = true;showInfo1=fasle;">Show Info 2</button>
<my-directive contact-info="contactInfo1" ng-show="showInfo1"></my-directive>
<my-directive contact-info="contactInfo2" ng-show="showInfo2"></my-directive>
Plunk here: https://plnkr.co/edit/EknrkUBBRl4rr7kma1Yw?p=preview