Angular UI-Router 多视图 [英] Angular UI-Router multiple views

问题描述

我正在使用 angular UI-Router.我的路由配置中有以下内容

.config(function config($stateProvider) {$stateProvider.state('newsFeedView', {url: '/newsFeed',控制器:'newsFeedController'，templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html',数据: {pageTitle: '新闻提要'}}).state('tradeFeedView', {url: '/tradeFeed',控制器:'tradeFeedController'，templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html',数据: {pageTitle: '贸易供稿'}}).state('公告板', {url: '/公告板',意见:{'贸易饲料':{网址:"",控制器:'tradeFeedController'，templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html'},'新闻源':{网址:"",控制器:'newsFeedController'，templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html'}},templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html'});})

在我的索引页面中，我只是使用以下方法调用视图:

在我的 bulletinBoard.html 中，我想要一个嵌套视图:

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

对于/newsFeed 页面和/tradeFeed 页面，这非常有效，但对于公告板，我在页面上看不到任何内容.我哪里出错了?

解决方案

我发现官方 GitHub wiki 上的示例非常不直观.这是一个更好的:

https://scotch.io/tutorials/angular-routing-using-ui-router

例如:

<预><代码>....state('公告板', {url: '/公告板',意见:{//主模板会放在这里(比较命名)'': { templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html' },//子视图将在这里定义(绝对命名)'tradeFeed@bulletinBoard': { 模板: ..... },//另一个子视图'newsFeed@bulletinBoard':{模板网址:......}}});

每个视图属性的语法是viewName@stateName.

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>

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

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

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?

解决方案

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

https://scotch.io/tutorials/angular-routing-using-ui-router

For instance:

...

.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: ......
        }
    }

});

The syntax of each view attribute being viewName@stateName.

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