Question

我在模板中有一个表，我希望用不同的数据填充。我的方法是在Angular中使用指令。我设法从我的表格中制作了一个模板，但我不知道如何从我的html中应用ng-repeat属性的值。

这是我index.html

的一部分

<div id='unannounced' kc-item-table>
</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>

继承我的指示

app.directive('kcItemTable', function() {
    return {
        restrict: 'E',
        templateUrl: 'scripts/controllers/itemTableTemplate.html'
    }
})

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

ng-repeat='item in itemList'

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

Answer 1

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

查看有关指令的文档：https://docs.angularjs.org/guide/directive

这是一个非常基本的例子，来自上面的文档：

主要模板：

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

指令：

.directive('myCustomer', function() {
    return {
      scope: {
        name: "@"
      },
      template: 'Name: {{name}}'
    };
  });

http://plnkr.co/edit/r9tIzwxCFyEyAU3NX0G1?p=preview

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

Answer 2

以下是您的代码的简单解释./

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

指令 - 使用隔离范围

app.directive('kcItemTable', function() {
    return {
        restrict: 'E',
        scope :{
           itemList :'='
           },
        templateUrl: 'scripts/controllers/itemTableTemplate.html'
    }
})

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

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

Answer 3

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

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

然后在YourCustomController中放置一个名为的$ scope属性。 $ scope.changableItemList;

或者如果您想在同一页面上使用多个这些指令，您可以使用隔离范围并执行：

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

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

并在你的指令中执行：

//你需要一个上面的控制器，它有$ scope.customList声明

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

如何将我的属性追加到Angular指令中的元素

3 个答案: