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>

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

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

Answer 1

include标签上的ng-init =“”属性可以满足你的需要。

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

Answer 2

不要使用ngInclude。使用directive并使用指令范围传递数据。

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

将参数传递给Angular的ng-include

2 个答案: