have children controllers listen for change of a parent controller

Question

I need a parent wrapper controller to always run and push data to any child containers. When an event on the parent wrapper changes scope of a property I need the child controllers to update

secure.controller('wrapperCtrl', function ($scope, storeFactory, safeFactory) {
    //get first store
    storeFactory.setStoreSummary(1).then(function (storeData) {
        $scope.store = storeData

        safeFactory.setSafe(storeData.safes[0].id).then(function(safeData){
            $scope.safe = safeData;
        });
    });

    $scope.changeSafe = function (safeId) {
        safeFactory.setSafe(safeId).then(function (safeData) {
            $scope.safe = safeData;
        });
    }
});

On the index.html page I have the following:

<div class="pageTitle">
    <h1>{{title}}</h1>
    <h2>{{store.storeName}}</h2>
    <ul class="safes">
        <li ng-repeat="safe in store.safes"><a href="#_" ng-class="isActive(safe.id)" ng-click="changeSafe(safe.id)" ng-cloak>{{safe.name}}</a></li>
    </ul>
</div>
<div ng-view class="fade"></div>

You can see the ng-view loads children controllers. Can I have something in the child controller listen for the $scope.changeSafe function in wrapperCtrl runs and re-bind it's $scope.safe

score 1 · Accepted Answer · answered Dec 16 '14 at 01:45

In case you need a more clear answer:

secure.controller('wrapperCtrl', function ($scope, storeFactory, safeFactory) {
    //get first store
    ...

    $scope.changeSafe = function (safeId) {
        safeFactory.setSafe(safeId).then(function (safeData) {
            $scope.safe = safeData;
            $scope.$broadcast('changeSafely'); // broadcast changeSafely event in parent ctrl
        });
    }
});

secure.controller('childCtrl', function($scope, ...) {

    function doSomething(){
        ...
    }

    $scope.$on('changeSafely', doSomething); // capture event and do you stuff

});

have children controllers listen for change of a parent controller

1 Answers1