Angularjs 如何将属性附加到Angular指令中的元素

我想用不同的数据填充模板中的表。我的方法是在Angular中使用指令。我设法从我的表中创建了一个模板，但我不知道如何应用html中的

ng repeat

属性的值

这是我的

index.html

<div id='unannounced' kc-item-table>
</div>

因此，为了重用模板，我希望能够更改

ng-repeat='item in itemList'

---

但我不知道如何将它附加到正确的元素。

您试图做的是AngularJS的一个非常基本的功能：数据绑定到指令

查看有关指令的文档：

以下是从上述文档中派生出来的一个非常基本的示例：

主模板：

  <div my-customer name="naomi"></div>
  <div my-customer name="boby"></div>

---

为了澄清，在您的案例中，您需要的是指令上的“范围”属性。您将能够通过DOM元素属性传递范围值

下面是对代码的简单解释/

您的html模板-

<table class='table'>
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat='item in changableItemList'>
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
        </tr>
    </tbody>
</table>

     <div id='unannounced' kc-item-table item-list='ItemList1'>
        </div>
 <div id='unannounced' kc-item-table item-list='ItemList2'>
        </div>

您可以对不同的列表使用指令--

<table class='table'>
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat='item in changableItemList'>
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
        </tr>
    </tbody>
</table>

     <div id='unannounced' kc-item-table item-list='ItemList1'>
        </div>
 <div id='unannounced' kc-item-table item-list='ItemList2'>
        </div>

---

这很简单，只需将其添加到您的div中，在其中添加属性指令即可

<div ng-controller="YourCustomController" id='unannounced' kc-item-table>
</div>

---

您不需要做任何事情，只需更改itemList的值即可？是的，我希望能够更改到另一个列表，以便用不同类型的项目填充我的表

     <div id='unannounced' kc-item-table item-list='ItemList1'>
        </div>
 <div id='unannounced' kc-item-table item-list='ItemList2'>
        </div>

<div ng-controller="YourCustomController" id='unannounced' kc-item-table>
</div>

 <div id='unannounced' kc-item-table customList='customList2'/>

 <div id='unannounced' kc-item-table customList='customList1'/>

app.directive('kcItemTable', function() {
    return {
        restrict: 'E',
        scope :{
           customList :'=' //isolated scope with customList passed in
           },
        templateUrl: 'scripts/controllers/itemTableTemplate.html'
    }
})