ui-router 默认状态使用 <div ui-view></div>答案

【问题标题】：ui-router default state using <div ui-view></div>ui-router 默认状态使用 <div ui-view></div>
【发布时间】：2014-07-11 09:30:26
【问题描述】：

如何在 ui-sref 中放置指向子状态的链接并在下方放置一个空的 ui-view 时加载默认子状态。我希望 ui-view 在页面加载时默认加载第一个子状态，并通过用户单击 ui-sref 链接，他/她在状态之间切换。

以下是解释我的场景的完整代码：

<div class="apps_head settings_top_head1">
            Favorities
            <a href="javascript:;" onclick="setRow1Toggle()"><img src="img/apps_menu.png"/></a>
            <div id="row1Dropdown" style="border: solid; display: none">
                <ul>
                    <li><a onclick="setRow1Toggle()"  ui-sref="dashboard.mainContent.favorites" href="javascript:;" style="color: black">Favorities</a></li>
                    <li><a onclick="setRow1Toggle()" ui-sref="dashboard.mainContent.passwords" href="javascript:;" style="color: black">Passwords</a></li>
                </ul>
            </div>
<div ui-view></div>

//=============================================== ======================================= //这里是 UI-Router 配置：

var myApp = angular.module('myApp', [
  //'ngRoute',
  'ui.router',
  'JungleLockControllers'
]).run(function($rootScope, $state){
    $rootScope.$state = $state;
});

myApp.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('home',{
            url:'/home',
            templateUrl:'partials/home.html',
            controller : 'HomepageController'

        })
        .state('career',{
            url:'/career',
            templateUrl:'partials/career.html'

        })
        .state('faq',{
            url:'/faq',
            templateUrl:'partials/faq.html'

        })
        .state('companyOverview',{
            url:'/companyOverview',
            templateUrl:'partials/companyOverview.html'

        })
        .state('press',{
            url:'/press',
            templateUrl:'partials/press.html'

        })
        .state('terms',{
            url:'/terms',
            templateUrl:'partials/terms.html'

        })

        .state('dashboard',{
            url:'/dashboard',
            views:{
                '':{templateUrl:'partials/dashboard.html'},
                'notifications@dashboard':{templateUrl:'partials/dashboard.notifications.html'}
            }
        })
        .state('dashboard.mainContent',{
            url:'/mainContent',
            //templateUrl:'partials/dashboard.mainContent.html'
            views: {
                '':{templateUrl:'partials/dashboard.mainContent.html'},
                'contentHeader@dashboard.mainContent':{templateUrl:'partials/dashboardContentHeader.html'},
                'row1@dashboard.mainContent':{templateUrl:'partials/row1.dashboard.html'},
                'row2@dashboard.mainContent':{templateUrl:'partials/row2.dashboard.html'},
                'row3@dashboard.mainContent':{templateUrl:'partials/row3.dashboard.html'},
                //'favorites@dashboard.mainContent':{templateUrl: "partials/favouriteContent.html"},
                //'passwords@dashboard.mainContent':{templateUrl: "partials/passwordsContent.html"},
                'sponsored@dashboard.mainContent':{templateUrl: "partials/sponsoredContent.html"},
                'browse@dashboard.mainContent':{templateUrl: "partials/browseContent.html"},
            }
        })
        .state('dashboard.mainContent.favorites',{
            url:'/favorites',
            templateUrl:'partials/favouriteContent.html'
        })
        .state('dashboard.mainContent.passwords',{
            url:'/passwords',
            templateUrl:'partials/passwordsContent.html'
        })  

        .state('dashboard.settings',{
            url:'/settings',
            templateUrl:'partials/dashboard.settings.html'
        }) 

        // .state('settings',{
            // url:'/settings',
            // templateUrl:'partials/dashboard.settings.html'
        // })
        .state('logout',{
            url:'/logout',
            templateUrl:'partials/logout.html'

        })

        /*
        Template for adding new empty state
        .state('',{
            url:'',
            templateUrl:''
        }) 
        */

        ;
        $urlRouterProvider.otherwise('/home');
});

【问题讨论】：

发布您的 ui-router 配置以及 plunker 上的工作版本会更好
特指状态：dashboard.mainContent
@jack.the.ripper 这样的场景，如果我参考 scotch.io ui-router 教程。我想在这个 plunker 上完成以下操作：[link])plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview)。这里 home 状态有两个子状态，1) home.list ，2) home.paragrapgh，所以当页面加载时，
默认没有加载任何状态，当用户点击其中一个 ui-sref 时，相应的状态被加载。 我想要的是默认加载 home.list，并且用户仍然可以通过 ui-sref 更改子状态

标签： angularjs angular-ui-router

【解决方案1】：

将您的路由器配置方法更改为：

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

$urlRouterProvider.otherwise('/home/list');

$stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
    .state('home', {
        url: '/home',
        abstract: true,
        templateUrl: 'partial-home.html'
    })

    // nested list with custom controller
    .state('home.list', {
        url: '/list',
        templateUrl: 'partial-home-list.html',
        controller: function($scope) {
            $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
        }
    })

    // nested list with just some random string data
    .state('home.paragraph', {
        url: '/paragraph',
        template: 'I could sure use a drink right now.'
    })

    // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
    .state('about', {
        url: '/about',
        views: {
            '': { templateUrl: 'partial-about.html' },
            'columnOne@about': { template: 'Look I am a column!' },
            'columnTwo@about': { 
                templateUrl: 'table-data.html',
                controller: 'scotchController'
            }
        }

    });

});

更改您的默认网址
将您的主页网址设为抽象状态。

希望对你有帮助

【讨论】：

【解决方案2】：

我已经找到并实现了解决方案，所以我所做的是，我将父状态设为 Abstract，而我希望默认显示的子状态，我给它一个空白 URL。这是一个例子。

myApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider.
.state('dashboard',{
        abstract:true,
        url:'/dashboard',
        views:{
            '':{templateUrl:'partials/dashboard.html',
                controller:'DashboardController'},
            'notifications@dashboard':{templateUrl:'partials/dashboard.notifications.html'}
        }
    })
.state('dashboard.mainContent',{
        url:'',
        views: {
            '':{templateUrl:'partials/dashboard.mainContent.html',
            controller:'DashboardController'},
            'contentHeader@dashboard.mainContent':{templateUrl:'partials/dashboardContentHeader.html'},
            //'contentHeader@dashboard.mainContent':{templateUrl:'partials/logoutConfirmationPrompt.html'},
            'row1@dashboard.mainContent':{templateUrl:'partials/row1.dashboard.html'},
            'row2@dashboard.mainContent':{templateUrl:'partials/row2.dashboard.html'},
            'row3@dashboard.mainContent':{templateUrl:'partials/row3.dashboard.html'},
            //'favorites@dashboard.mainContent':{templateUrl: "partials/favouriteContent.html"},
            //'passwords@dashboard.mainContent':{templateUrl: "partials/passwordsContent.html"},
            'sponsored@dashboard.mainContent':{templateUrl: "partials/sponsoredContent.html"},
            'browse@dashboard.mainContent':{templateUrl: "partials/browseContent.html"},
        }
    })

这样我的问题就解决了，非常感谢您的帮助。

【讨论】：