javascript - 子状态更改时 Angular 重新加载父 Controller

Question

我是 Angular JS 和 IONIC 的新手。

我有左侧菜单:- 菜单 1- 菜单 2- 菜单 3

右侧菜单会根据选择的左侧菜单动态变化。

我成功做到了。但是，问题是当我切换到其他菜单时，在我刷新页面(使用 F5)之前我的右侧菜单不会更新。

我的代码有什么问题:

Controller .js

angular.module('starter.controllers', [])

    .controller('AppCtrl', function ($state, $scope, $stateParams) {
        var source = $stateParams.source;
        $scope.title = source;
        $scope.data = {items: []};

        if (source == 'Menu1') {
           $scope.data.items.push({url: source + '/AAA', label: "AAA"});
           $scope.data.items.push({url: source + '/BBB', label: "BBB"});
           $scope.data.items.push({url: source + '/CCC', label: "CCC"});
        }
        if (source == 'Menu2') {
           $scope.data.items.push({url: source + '/EEE', label: "EEE"});
        }
        if (source == 'Menu3') {
           $scope.data.items.push({url: source + '/FFF', label: "FFF"});
        }
    })

    .controller('NewsListCtrl', function ($scope, $stateParams) {

    })
;

应用程序.js

.config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider

            .state('app', {
                url: "/app/:source/:channel",
                templateUrl: "templates/layout.html",
                controller: 'AppCtrl'
            })
            .state('app.newsList', {
                url: "/news-list",
                views: {
                    'menuContent': {
                        templateUrl: "templates/news-list.html",
                        controller: 'NewsListCtrl'
                    }
                }
            })

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/app/Menu1/AAA/news-list');

    });

布局.html

<ion-side-menus enable-menu-with-back-views="false">>
    <ion-side-menu-content>
        ...
    </ion-side-menu-content>

    <ion-side-menu side="left">
        <ion-content>
            <ion-list>
                <ion-item menu-close href="#/app/Menu1/AAA/news-list">
                    AAA
                </ion-item>
                <ion-item menu-close href="#/app/Menu2/EEE/news-list">
                    EEE
                </ion-item>
                <ion-item menu-close href="#/app/Menu3/FFF/news-list">
                    FFF
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>

    <ion-side-menu side="right">
        <ion-content>
            <ion-list>
                <ion-item menu-close ng-repeat="item in data.items" href="#/app/{{item.url}}/news-list">
                    {{item.label}}
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

Answer 1

由于子状态更改时不会重新创建父 Controller ，因此您可以让父 Controller 监听 $stateChangeSuccess 并根据状态参数更新菜单:

$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){ ... })

https://github.com/angular-ui/ui-router/wiki#state-change-events