Подтвердить что ты не робот

Angular ui router несколько именованных представлений для всех состояний

Я хочу знать, есть ли способ написать несколько именованных представлений для всех состояний, лучший пример - когда я хочу, чтобы панель навигации и нижний колонтитул отображались на всех маршрутах.

$stateProvider
  .state('home',{
    views: {
      'home': {
        templateUrl: 'home.html',
        controller: controller
      },
      'nav': {
        templateUrl: 'nav.html',
        controller:controller
      },
      'footer': {
        templateUrl: 'footer.html',
        controller: controller
      },
    }
  })

Я не хочу использовать ng-include, потому что nav и нижний колонтитулы отображаются до того, как исходное состояние будет разрешено в этом случае.

4b9b3361

ОТВЕТЫ

Ответ 1

Да, вы можете написать его в руководстве ui-router о том, как управлять несколькими именованными видами.

Во-первых, вам нужно определить определенный набор именованных представлений в абстрактном состоянии, включая представление, в которое вы поместили бы все ваши представления контента, такие как ваш home.html, и поместили его в безымянный вид (пустая строка).

Как вы могли заметить, в приведенной ниже демонстрации показано состояние root с именем app, которое также является абстрактным состоянием (это означает, что вы не можете перемещаться в этом состоянии). Он имеет три представления, каждое из которых представляет собой имя, которое соответствует ui-view, определенному в index.html.

Внутри безымянного представления содержится content.html, у которого есть безымянный ui-view, который будет представлять все дочерние состояния состояния app. Делая это, вы можете делиться nav.html и footer.html со всеми вашими состояниями, если вы добавляете эти состояния в состояние app. Примером этого может быть состояние app.home и app.items. Чтобы узнать больше об этом, прочитайте ссылку, которую я добавил выше.

DEMO

Javascript

$urlRouterProvider.otherwise('/home');

$stateProvider.state('app', {
  abstract: true,
  views: {
   nav: {
     templateUrl: 'nav.html',
     controller: 'NavController as Nav'
   },

   '': {
     templateUrl: 'content.html',
     controller: 'ContentController as Content'
   },

   footer: {
     templateUrl: 'footer.html',
     controller: 'FooterController as Footer'
   }

  }
})

.state('app.items', {
  url: '/items',
  templateUrl: 'items.html',
  controller: 'ItemsController as Items'
})

.state('app.home', {
  url: '/home',
  templateUrl: 'home.html',
  controller: 'HomeController as Home'
});

HTML

index.html

<ui-view name="nav"></ui-view>
<ui-view></ui-view>
<ui-view name="footer"></ui-view>

content.html

<hr>
<ui-view></ui-view>
<hr>