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作为模板并具有隔离范围创建自定义指令。在任何需要的地方使用该指令，并将模型作为输入传递给来自不同位置的该指令。

以下是可能对您有所帮助的简短示例。

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

关联指令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

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

1 个答案: