如何在角js中使用相同的html但不同的模型值？

Question

我有一個場景，其中html兩個部分是相同的，但模型是不同的。例如看到下面的代碼

<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> 

我需要在第二部分，但這次這個相同html綁定都是這樣

<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> 

有什麼辦法，所以我可以一次編寫HTML，但該數據綁定適用於他們兩人。

Answer 1

使用此html作爲模板創建一個自定義指令並具有隔離範圍。在任何需要的地方使用指令，並將模型作爲輸入從不同位置傳遞給該指令。

下面是一個簡短的例子，它可以幫助你。

定義指令：

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. 
    } 
    } 
}) 

準一個指令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> 

使用該指令在主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> 

普拉克這裏：https://plnkr.co/edit/EknrkUBBRl4rr7kma1Yw?p=preview