각도 UI-라우터 다중 보기

각도 UI-라우터 다중 보기

각도 UI 라우터를 사용하고 있습니다.루트 설정에는 다음과 같은 것이 있습니다.

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

인덱스 페이지에서 다음을 사용하여 보기를 호출합니다.

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

My bulletinBoard.html에서 중첩 보기를 원하는 경우:

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

/newsFeed 페이지와 /tradeFeed 페이지의 경우 완벽하게 작동하지만 게시판의 경우 페이지에 아무것도 표시되지 않습니다.내가 어디가 잘못됐지?

저는 공식 GitHub 위키의 예가 매우 무의미하다고 생각합니다.여기 더 나은 방법이 있습니다.

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.

그.state()메서드의templateUrl를 사용할 때 무시됩니다.views물건.상세한 것에 대하여는, https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#user-content-views-override-states-template-properties 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/22175980/angular-ui-router-multiple-views