How to display a dynamic message in a parent controller based on the results obtained from three child controllers

Question

I have a div which wraps three other's, each with its own controller. I want to dynamically display a message based on results obtained from each controller. For instance if 1 of the 3 arrays resolved have length greater than 0, I want to to reflect that in a warning message. I attempted to place a parent controller around the three child controllers but there is no way for me to access the scope of the children from the parent and this seems incorrect anyway. Any help would be much appreciated.

<div id="pp-summary" ng-controller='PPSummaryCtrl as summCtrl'>
    <div id="pp-stats-summary" ng-controller='PlayerProfileStatsCtrl as s'>     
        <page-section section-title="'Recent Statistics'" excel="{ data:     s.statList, definitions: s.summaryHeaders, name: s.player.fullName + ' -  Summary     Stats' }"    >
            <core-table 
            table-sort
            parent-child-rows
            data="s.statList" 
            footer-data="s.statTotals" 
            columns="s.summaryHeaders">
            </core-table>
        </page-section>
    </div>
    <div ng-controller="PPScoutingCtrl as e">
        <h3 ng-if="!e.permission" id="no-eval-message">
            You do not have permissions to view evals on file for this player.
        </h3>
        <page-section ng-repeat="type in e.evalTypes" section-title="'Recent '+type.description + ' Evals'" ng-if="e.evalsByType[type.evalTypeLk]"
            excel="{data: e.evalsByType[type.evalTypeLk], definitions: e.getColumns(type.evalTypeLk), name: e.player.fullName + ' ' + type.description}"
            >
            <c-table columns="e.getColumns(type.evalTypeLk)" data="e.evalsByType[type.evalTypeLk]" group-rows="true" click-row="e.selectEval" class="table-overflow wrap-last-column"></c-table>
        </page-section>
    </div>
    <div ng-controller="PPNotesCtrl as n">
        <page-section ng-if="n.notes" section-title="'Recent Notes'">
            <c-table data="n.notes" click-row="n.selectNote" highlight="n.highlight" class="table-overflow" columns="n.noteColumns">
            </c-table>
        </page-section>
    </div>
    <h3 id="no-eval-message">
        {{ summCtrl.getWarningMessage() }}
    </h3>
</div>

`$scope.$emit` in your child controllers and `$scope.$on` in your parent controller. — Maria Ines Parnisari, Sep 06 '16 at 20:14

score 2 · Accepted Answer · edited May 23 '17 at 12:16

2

this question is answered and explained here.. AngularJS - Access to child scope

The short story is you can not do it.

You can use emit and broadcast as Gustavo suggested.

You could also:

Define the appropriate properties in the parent, and then reference them in the children

Use a service as a middle man

edited May 23 '17 at 12:16

Community

1
1

answered Sep 06 '16 at 20:29

defaultcheckbox

739
2
5
16

score 1 · Answer 2 · answered Sep 06 '16 at 20:19

I dont know if its the right thing to do, but you can use $on and $broadcast.

In the parent controller you can put something like this:

$rootScope.$on('load-warning', function() {
  $scope.warning-message = "Warning";
});

And in the child after you load the list:

$rootScope.$broadcast('load-warning');

Again, pretty sure this is not the best way but it does the job, hope it helps =)

How to display a dynamic message in a parent controller based on the results obtained from three child controllers

2 Answers2