Question

我是角度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) {

    })
;

app.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');

    });

的layout.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

由于在子状态更改时未重新创建父控制器，您可以让父控制器侦听$ stateChangeSuccess并根据状态参数更新菜单：

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

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

有关子状态更改的角度重新加载父控制器

1 个答案: