AngularJS вызывает функцию контроллера из другого контроллера - PullRequest
Новая
       8

AngularJS вызывает функцию контроллера из другого контроллера

0 голосов
/ 24 января 2019

В моем проекте у меня есть paginated table в table.html (директива), и у меня есть соответствующий контроллер (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), который присутствует в my-paged-data.js контроллер изнутри функции sortlist, присутствующей в файле table.js.

Возможно ли это?Если нет, то какой подход я должен использовать, чтобы просмотреть отсортированные данные сразу, когда я щелкну по заголовку столбца, внеся изменения только в table.html и table.cs.

1 Ответ

0 голосов
/ 24 января 2019

Я бы предложил вам использовать 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 даст вам возможность вызывать ее в дочернем контроллере или родительском контроллере в любое время.

...