web-dev-qa-db-fra.com

Angular Plusieurs vues d'UI-Router

J'utilise angular UI-Router. J'ai les éléments suivants dans ma configuration de route

.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'
    });
})

Dans ma page d'index, je viens d'appeler la vue en utilisant:

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

Dans Mon bulletinBoard.html, je souhaite une vue imbriquée:

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

Cela fonctionne parfaitement pour la page/newsFeed et les pages/tradeFeed, mais pour le tableau d'affichage, je ne vois rien sur la page. Où vais-je mal?

angularjsangular-ui-router
43
TJF

Je trouve que l'exemple sur le wiki officiel de GitHub est très peu intuitif. En voici un meilleur:

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

Par exemple:

...

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

});

La syntaxe de chaque attribut de vue étant viewName@stateName.

106
appletwo

La méthode templateUrl de la méthode .state() est ignorée lors de l'utilisation de l'objet views. Voir le wiki ui-router pour plus d'informations: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#user-content-views-override-states-template- propriétés

9
squidbe