AngularJS invoke a controller function from another controller

Question

In my project I am having a paginated table in table.html(directive) and i have its corresponding controller (table.js).

Please see the code snippets from each file.

`======================== 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>

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

Currently when I click the HTML table column header Product the sortlist() method in table.js is getting called, but the data in the table is not getting sorted unless I click the pagination tabs once. In the backend its getting sorted but setPage(pageNumber) needs to be called once (Its present in my-paged-data.js controller JS).

I want to somehow call the setPage(pageNumber) method that is present in the my-paged-data.js controller from inside the function sortlist which is present in the table.js file.

Is it possible ? If not then what approach shall I take to see the sorted data immediately when I click the column header by only making changes in table.html and table.cs.

Consider providing an intermediary means like a service, in which you then implement this `setPage(...)` function so that it can be called from where you need it to be. — miqh, Jan 24 '19 at 12:44
Possible duplicate of https://stackoverflow.com/questions/9293423/can-one-angularjs-controller-call-another?rq=1 — Sukanya Pai, Feb 01 '19 at 19:24

score 0 · Answer 1 · answered Jan 24 '19 at 12:59

I would suggest you to use the prototypical inheritance between Parent and Child Controller to solve this problem. In your case since the directive is called from table.html therefore following will be the hierarchy:

Parent Controller: table.js
Child Controller: my-paged-data.js

Finally, this is how your code should look like:

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>

Defining the function in parent-controller will give you the liberty to call it in child controller or parent controller whenever you want.

AngularJS invoke a controller function from another controller

1 Answers1