角UI的路由器的多个视图 [英] Angular UI-Router multiple views

问题描述

我采用了棱角分明的UI路由器。我在我的路由配置以下

I am using angular UI-Router. I have the following in my route config

.config(function config($stateProvider) {
    $stateProvider.state('newsFeedView', {
            url: '/newsFeed',

            controller: 'newsFeedController',
            templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html',


            data: { pageTitle: 'News Feed' }
        })
        .state('tradeFeedView', {
            url: '/tradeFeed',

            controller: 'tradeFeedController',
            templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html',


            data: { pageTitle: 'Trade Feed' }
        })
        .state('bulletinBoard', {
            url: '/bulletinBoard',
            views: {
                'tradeFeed': {
                    url: "",
                    controller: 'tradeFeedController',
                    templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html'
                },
                'newsFeed': {
                    url: "",
                    controller: 'newsFeedController',
                    templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html'
                }
            },
            templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html'
        });
})

在我的索引页我只是用调用视图：

In my index page I just invoke the view using:

        <div class="container" ui-view></div>

在我的bulletinBoard.html我想有一个嵌套的看法：

In My bulletinBoard.html i want to have a nested view:

<div ui-view="tradeFeed"></div>
<div ui-view="newsFeed"></div>

对于/新闻推送页和/ tradeFeed此页作品完美，但对于公告板，我不能看到页面上的任何东西。我在哪里去了？

For the /newsFeed page and the /tradeFeed pages this works perfectly but for the bulletin board i can't see anything on the page. Where am i going wrong?

推荐答案

我觉得官方GitHub的维基的例子是非常直观。这是一个更好的：

I find the example on the official GitHub wiki to be very unintuitive. Here is a better one:

<一个href=\"https://scotch.io/tutorials/angular-routing-using-ui-router\">https://scotch.io/tutorials/angular-routing-using-ui-router

例如：

...

.state('bulletinBoard', {
    url: '/bulletinBoard',
    views: {

        // the main template will be placed here (relatively named)
        '': { templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html' },

        // the child views will be defined here (absolutely named)
        'tradeFeed@bulletinBoard': { template: ..... },

        // another child view
        'newsFeed@bulletinBoard': { 
            templateUrl: ......
        }
    }

});

每个视图属性为的viewName @ Statename的的语法。

这篇关于角UI的路由器的多个视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！