Question

HTML

<table ng-show="ecu.dtcs">
    <tbody>
        <tr>
            <td colspan="4">
                <uib-accordion close-others="true">
                    <uib-accordion-group ng-repeat="dtc in dtcList track by $index">
                        ...
                    </uib-accordion-group>
                </uib-accordion>
            </td>
        </tr>
    </tbody>
</table>

<uib-pagination
    total-items="{{ totalItems }}"
    ng-model="{{ currentPage }}"
    items-per-page="{{ itemsPerPage }}"
    boundary-link-numbers="true"
    ng-change="setPagingData(currentPage)">
</uib-pagination>

JS （指令）

link: function (scope) {

    scope.showEcuDetails = function (ecu) {

        // For pagination
        scope.itemsPerPage = 20;
        scope.totalItems = ecu.dtcs.length;
        scope.currentPage = 1;

        scope.setPagingData = function(currentPage) {
            var start = (currentPage - 1) * scope.itemsPerPage,
                end = currentPage * scope.itemsPerPage;

            scope.dtcList = ecu.dtcs.slice(start, end);
        };

        scope.setPagingData(scope.currentPage);
    };
}

ecu.dtcs：保存我想要的所有数据
dtcList：每个20个元素保留sliced个列表

我使用了Angular-Bootstrap文档并且还引用了此source（除了使用ng-change更改列表而不是范围内的$watch）

我已经彻底调试了应用程序，我可以看到dtcList正在填充前20个元素。但是，进入HTML后，没有显示任何内容

我还尝试编写.filter（如显示为here），但由于变量是在指令范围内设置而不是控制器，我的过滤器无法看到变量

NB：对于分页设置，要引用范围变量（即totalItems），我使用了此问题中显示的Angular表达式以及文档中的基本字符串（即"totalItems"）

我认为目前编写的概念和方式应该有效，只是因为某些原因HTML无法看到dtcList

修改

知道这是一个角度ui-bootstrap模式可能会有所帮助。在setPagingData()的函数调用下面，我有：

$uibModal.open({
    templateUrl: "ecuDialog.html",
    size: "lg",
    windowClass: "modalDialogs networkTest__largeContentDialog",
    scope: scope
});

templateUrl是我在此问题的 HTML 部分编写的内容。我想到这是否是问题，但我的同事们向我保证不会以任何方式影响结果。

编辑2

不幸的是，我们的一位专门研究AngularJS的同事已经查看了代码以及文档，并且看不到其中的任何错误。它可能是一个Angular错误，还是来自angular-ui-bootstrap的多个元素的组合，它不喜欢？

我要合并的是：

ui-modal
ui-accordion
ui-pagination

Answer 1

解决方案：

我的代码是正确的。我的同事试了一下，把我写的代码带到了另一个指令中。我们都不确定为什么会这样，也许Angular不喜欢过度拥挤的指令？

Angular-bootstrap分页 - 在“范围”中不变量

1 个答案: