Question

嘿，我有一个我创建的简单应用程序。

该应用有以下观点

1. 设置 - 主视图。

2. 个人资料 - 子视图，设置视图的子项。

3. 帐户 - 子视图，设置视图的子项。

我希望应用程序从配置文件页面开始，因此我编写了以下代码：

$urlRouterProvider.otherwise('/profile');

但显然注意到了，我有一个空白屏幕，无法正确查看视图（settings.profile）。

我已将我的代码添加到plunker中，以便为其他开发人员提供更方便和可访问的内容，以帮助我解决问题。 https://plnkr.co/edit/RFP5dUNV876cy8vRDuvL?p=preview

主要主要代码是这样的：

/**
*  Module
*
* Description
*/
var app = angular.module('app', ['ui.router'])

app.controller('mainCtrl', ['$scope', function($scope){
    $scope.title="Index Page";
}]);

app.controller('ProfileController', ['$scope', function($scope){
    $scope.title="Profile Page";
}]);

app.controller('AccountController', ['$scope', function($scope){
    $scope.title="Account Page";
}]);

app.controller('SettingsController', ['$scope', function($scope){
    $scope.title="Settings Page";
}]);

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('settings', {
            url: '/settings',
            templateUrl: 'settings.html',
            controller: 'SettingsController'
        })
        .state('settings.profile', {
            url: '/profile',
            templateUrl: 'profile.html',
            controller: 'ProfileController'
        })
        .state('settings.account', {
            url: '/account',
            templateUrl: 'account.html',
            controller: 'AccountController'
        });
    $urlRouterProvider.otherwise('/profile');
});

Answer 1

将.otherwise功能更改为：

$urlRouterProvider.otherwise('/settings/profile');

由于其他路由嵌套在settings状态，因此您只能通过<ui-view>中的settings.html访问嵌套视图。如果两者中都定义了url参数，则网址也会相互嵌套，因此需要/settings/profile。

Updated Plnkr

ui-router嵌套视图无法正确加载

1 个答案: