Question

如何在ui-sref中放置子状态链接并在下面放置一个空ui视图时加载默认子状态。我希望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');
});

Answer 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'
            }
        }

    });

});

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

希望这有帮助

Answer 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"},
        }
    })

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

使用<div ui-view =“”> </div>的ui-router默认状态

2 个答案: