传递参数给Angular的ng-include。

Question

我需要在我的页面上放置两个表格，并且表格内需要有很多元素。

我已经创建了一个名为AccountItem.html的文件:

<div data-as-sortable-item-handle>
<table>
    <tr>
        <td class="draggable-index-field">
            {{$index + 1}}
        </td>
        <td class="draggable-name-field">
            {{item.accountName}}
        </td>
        <td class="draggable-enabled-field">
            <input id="enabled-{{$index}}" type="checkbox" name="accounts[]" ng-checked="item.enabled" disabled/>
        </td>
    </tr>
</table>

这个文件与表格中的每一行相关。

此外，我为表格创建了一个名为SortAccountList.html的文件：

<div class="panel panel-info">
<div class="panel-heading">
    <h3 class="panel-title ng-binding">{{title}}</h3>
</div>
<div class="panel-body">
    <table>
        <td class="draggable-index-field">
            #
        </td>
        <td class="draggable-name-field">
            Account Name
        </td>
        <td class="draggable-enabled-field">
            Enabled
        </td>
    </table>
    <ul data-as-sortable = "sortableOptions" data-ng-model="accountList" class="draggable-area">
        <li ng-repeat="item in accountList" data-as-sortable-item ng-include="'AccountItem.html'"></li>
    </ul>
</div>

我在我的主文件中使用指令来包含这个文件：

<div ng-include="'SortAccountList.html'" onload="title = 'Sorted Account List'; accountList = sortedAccounts"></div>

当我在浏览器中加载此页面时，它会显示表格，并显示我使用“title”参数传递的标题。但是它不想显示表格中的行。但是，如果我将控制器中的accountList更改为sortedAccounts（这是一个列表），它就会显示所有行。 我不能使用sortedAccounts，因为我有第二个表格，我希望从我的控制器中传递不同的帐户。

所以，我的问题是，如何正确传递此参数？谢谢！

- migAlex

Answer 1

在include标签上使用ng-init=""属性应该能够满足你的需求。

<div ng-include="'SortAccountList.html'" 
ng-init="title = 'SortedAccount List'; accountList = sortedAccounts"></div>`

- J.K.Lauren

---

不幸的是，这并没有帮助。我可以在表格中看到标题，但是没有行。 - migAlex

Answer 2

不要使用ngInclude。使用指令并通过指令的作用域传递数据。

directive('sortAccountList', function() {
  return {
    restrict: 'E',
    scope: {
      title: '=',
      accountList: '='
    },
    templateUrl: 'SortAccountList.html'
  };
});

- Julien Roy