访问url[材质Ui+选项卡]时,Angular Ui路由器未加载视图

Angular Ui Router not loading view when accessing url [material-ui + tabs]

本文关键字:Ui Angular 路由器 视图 加载 url 材质 Ui+ 选项 访问      更新时间:2023-09-26

我使用的是Angular+material ui,基本上我想用不同的步骤来完成入职流程,所以我使用tabs指令,每个指令都有不同的ui-view

Html:

<div ng-controller="TabsCtrl" class="content" ng-show="$root.loadingComplete">
    <md-tabs md-selected="$root.selectedIndex" md-border-bottom class="md-primary">
        <md-tab id="tab1" md-on-select="goTo('start')">
            <md-tab-label>Welcome</md-tab-label>
            <md-tab-template>
                <md-content>
                    <div ui-view="vStart"></div>
                </md-content>
            </md-tab-template>
        </md-tab>
        <md-tab id="tab2" md-on-select="goTo('personal')">
            <md-tab-label>Personal</md-tab-label>
            <md-tab-template>
                <md-content>
                    <div ui-view="vPersonal"></div>
                </md-content>
            </md-tab-template>
        </md-tab>

这是我的路线配置:

angular.module('onboarding').config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('start', {
                url: '/:memberId',
                views: {
                    vStart: {
                        templateUrl: 'views/start.html',
                        controller: 'StartCtrl'
                    }
                }
            })
            .state('personal', {
                url: '/:memberId/personal',
                views: {
                    vPersonal: {
                        templateUrl: 'views/personal.html',
                        controller: 'PersonalCtrl'
                    }
                }
            })
           ...

功能goTo(状态):

$scope.goTo = function(state) {
            $state.transitionTo(state, $stateParams);
        };

问题主要是,如果我打开url localhost:9000/#/12345上的"主页",它工作正常,我看到了开始视图,我可以用切换到个人视图

$rootScope.selectedIndex = 1;
$state.transitionTo('personal', $stateParams);

但是,如果我直接从localhost:9000/#/12345/personal打开url,则不会发生任何事情,视图也不会加载,控制器也不会加载。我有一个console.log('start controller')和相同的console.log('personal controller')在加载时要检查。

此外,浏览器历史记录也不起作用,例如,我转到起始页locahost:9000/#/12345,然后单击按钮转到localhost:9000/#/12345/personal,一切正常,但如果我返回浏览器历史记录,url是localhost:9000/#/1245(正确),但视图完全为空,根本没有加载控制器。

您的路由似乎已关闭。UI路由器将子状态的url附加到其父状态。

尝试删除标题/:memberId:

.state('personal', {
    url: '/personal',
        views: {
            vPersonal: {
                templateUrl: 'views/personal.html',
                controller: 'PersonalCtrl'
             }
         }
})