Question

在我的项目中，我在table.html（directive）中有一个分页的表，并且有对应的控制器（table.js）。

请查看每个文件中的代码段。

`======================== table.html ============================
<div class="row">
    <div class="col-xs-12">
        Search: &emsp; &emsp;<input ng-model="searchText"  ng-change="searchChange(searchText)"/>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">

        <table class="table">
            <thead>
                <tr>
                    <th></th>
                    <th class="text-center"><a href='#' ng-click="sortlist('product')">Product</a></th>
                    <th class="text-center">Service Name</th>
                    <th class="text-center">Distributor Name</th>
                    <th class="text-center">Type</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="data in paged_data">
                    <td class="text-center"><cc-customer-geo geo-code="sku.geoCode"></cc-customer-geo></td>
                    <td class="text-center">{{data.product}}</td>
                    <td class="text-center">{{data.ServiceName}}</td>
                    <td class="text-center">{{data.DistributorName}}</td>
                    <td>
                        <div class="text-center" ng-switch="data.type">
                            <span class="text-center" ng-switch-when="0">Trial</span>
                            <span class="text-center" ng-switch-when="1">Licensed</span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-xs-12">
        <my-paged-data input-data="input_data_list" paged-data="paged_data"></my-paged-data>
    </div>
    <div class="col-xs-12 text-center" ng-if="isdataLoading">
        <cc-loading is-loading="isdataLoading" error="DataLoadirror"></cc-loading>
    </div>
</div>

` =========================== my-paged-data.html =============== ===============

<uib-pagination total-items="getTotalItemsCount()"
                max-size="pagingSettings.maxSize"
                first-text="<<"
                previous-text="<"
                next-text=">"
                last-text=">>"
                boundary-links="true"
                items-per-page="pagingSettings.recordsPerPage"
                ng-show="isPagingVisible()"
                ng-model="pageNumber"
                ng-change="setPage(pageNumber)">

</uib-pagination>

================================================ =========================

当前，当我单击HTML表列标题Product时，将调用sortlist()中的table.js方法，但是除非单击分页选项卡，否则表中的数据不会得到排序。一旦。在后端对其进行排序，但是setPage(pageNumber)需要被调用一次（它存在于my-paged-data.js控制器JS中）。

我想以某种方式从setPage(pageNumber)文件中存在的函数sortlist内部调用my-paged-data.js控制器中存在的table.js方法。

有可能吗？如果不是这样，那么当我仅通过在table.html和table.cs中进行更改而单击列标题时，应该采取哪种方法立即查看排序后的数据。

Answer 1

我建议您在父控制器和子控制器之间使用prototypical inheritance来解决此问题。在您的情况下，由于该指令是从table.html调用的，因此以下是层次结构：

父控制器：table.js
子控制器：my-paged-data.js

最后，这是您的代码的外观：

table.js

// Add this in the controller in the very start
$scope.forChild = {}

// Move the function of setPage to Parent Controller
$scope.forChild.setPage = function(pageNumber){...}

// Call the function
$scope.forChild.setPage(1)

my-paged-data.html

<uib-pagination total-items="getTotalItemsCount()"
                max-size="pagingSettings.maxSize"
                first-text="<<"
                previous-text="<"
                next-text=">"
                last-text=">>"
                boundary-links="true"
                items-per-page="pagingSettings.recordsPerPage"
                ng-show="isPagingVisible()"
                ng-model="pageNumber"
                ng-change="forChild.setPage(pageNumber)">

</uib-pagination>

在parent-controller中定义该函数将使您可以随意在子控制器或父控制器中调用它。

AngularJS从另一个控制器调用一个控制器函数

1 个答案: