javascript - 让子 Controller 监听父 Controller 的更改

Question

这个问题已经有答案了:

What's the correct way to communicate between controllers in AngularJS? (19 个回答)

已关闭 8 年前。

我需要一个父包装controller始终运行并将数据推送到任何子容器。当父包装上的事件更改属性的范围时，我需要子 controllers更新

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;
        });
    }
});

关于index.html页面我有以下内容:

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

您可以看到ng-view加载 child controllers 。我可以在子 Controller 中放置一些东西来监听 $scope.changeSafe函数位于 wrapperCtrl运行并重新绑定(bind)它的 $scope.safe

Answer 1

如果您需要更明确的答案:

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

});