Несколько состояний для множественных просмотров на одной странице

У меня возникли проблемы с таргетингом вложенных представлений на одну страницу с несколькими видами. Вот мой код.Несколько состояний для множественных просмотров на одной странице

$stateProvider 
    .state('root', { 
     abstract: true, 
     url: '/', 
     views: { 

      'viewA': { 
       templateUrl: '/views/viewA.html' 
      }, 

      'viewB': { 
       templateUrl: '/views/viewB.html' 
      } 
     } 
    }) 
    .state('root.sectionA1', { 
     url: '', 
     views: { 
      'viewASub': { 
       templateUrl: '/views/viewA.Section1.html' 
      } 
     } 
    }) 
    .state('root.sectionA2', { 
     url: '', 
     views: { 
      'viewASub': { 
       templateUrl: '/views/viewA.Section2.html' 
      } 
     } 
    }) 
    .state('root.sectionB1', { 
     url: '', 
     views: { 
      'viewBSub': { 
       templateUrl: '/views/viewB.Section1.html' 
      } 
     } 
    }) 
    .state('root.sectionB2', { 
     url: '', 
     views: { 
      'viewASub': { 
       templateUrl: '/views/viewB.Section2.html' 
      } 
     } 
    })

Мой index.html

<body> 
    <div ui-view="viewA"></div> 
    <div ui-view="viewB"></div> 
</body>

HTML, мои 2 секции

<!-- viewA.html --> 
view A content 
<div ui-view="viewASub"></div> 


<!-- viewB.html --> 
view B content 
<div ui-view="viewBSub"></div>

На данный момент все подвид состояния для viewA обнаружиться штраф. Я могу добавить несколько разделов и показать разные состояния, используя ссылку ui-sref. Но я не могу получить какой-либо из подзонов «viewB», чтобы они отображались. Когда я помещаю «root.sectionB1» выше «root.sectionA1», то вторые секции отображаются хорошо. Я предполагаю, что мне нужно быть более конкретным в том, как я ссылаюсь на родителя для каждого подвью. Я что-то упустил?

источник

2015-06-18 Sat

У вас была ошибка копирования/вставки в root.sectionB2 вид должен быть viewBSub, тогда я думаю, что он работает должным образом.

Пожалуйста, взгляните на демо внизу или на этом fiddle.

angular.module('demoApp', ['ui.router']) 
 
.config(function($urlRouterProvider, $stateProvider) { 
 
    $urlRouterProvider.otherwise('/'); 
 
    $stateProvider 
 
    .state('root', { 
 
     abstract: true, 
 
     url: '/', 
 
     views: { 
 

 
      'viewA': { 
 
       templateUrl: 'views/viewA.html' 
 
      }, 
 

 
      'viewB': { 
 
       templateUrl: 'views/viewB.html' 
 
      } 
 
     } 
 
    }) 
 
    .state('root.sectionA1', { 
 
     url: '', 
 
     views: { 
 
      'viewASub': { 
 
       templateUrl: '/views/viewA.Section1.html' 
 
      } 
 
     } 
 
    }) 
 
    .state('root.sectionA2', { 
 
     url: '', 
 
     views: { 
 
      'viewASub': { 
 
       templateUrl: '/views/viewA.Section2.html' 
 
      } 
 
     } 
 
    }) 
 
    .state('root.sectionB1', { 
 
     url: '', 
 
     views: { 
 
      'viewBSub': { 
 
       templateUrl: '/views/viewB.Section1.html' 
 
      } 
 
     } 
 
    }) 
 
    .state('root.sectionB2', { 
 
     url: '', 
 
     views: { 
 
      'viewBSub': { //copy/paste mistake 
 
       templateUrl: '/views/viewB.Section2.html' 
 
      } 
 
     } 
 
    }) 
 
});

[ui-view="viewASub"] { 
 
    color: blue; 
 
    /*border:1px solid #000;*/ 
 
} 
 

 
[ui-view="viewBSub"] { 
 
    color: red; 
 
    /*border:1px solid #000;*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script> 
 

 
<div ng-app="demoApp"> 
 
<script type="text/ng-template" id="views/viewA.html"> 
 
    <!-- viewA.html --> 
 
view A content 
 
<div ui-view="viewASub"></div> 
 
</script> 
 
    <script type="text/ng-template" id="/views/viewA.Section1.html"> 
 
view A section 1 
 
</script> 
 
    <script type="text/ng-template" id="/views/viewA.Section2.html"> 
 
view A section 2 
 
</script> 
 
<script type="text/ng-template" id="views/viewB.html"> 
 
<!-- viewB.html --> 
 
view B content 
 
<div ui-view="viewBSub"></div> 
 
</script> 
 
<script type="text/ng-template" id="/views/viewB.Section1.html"> 
 
view B section 1 
 
</script> 
 
<script type="text/ng-template" id="/views/viewB.Section2.html"> 
 
view B section 2 
 
</script> 
 
<div ui-view="viewA"></div> 
 
<div ui-view="viewB"></div> 
 
    <a ui-sref="root.sectionA1">sectionA1</a> 
 
    <a ui-sref="root.sectionA2">sectionA2</a> 
 
    <a ui-sref="root.sectionB1">sectionB1</a> 
 
    <a ui-sref="root.sectionB2">sectionB2</a> 
 
</div>

источник

2015-06-18 19:22:20 AWolf

Спасибо за ответ. Я понял, что в своем первоначальном вопросе я не был достаточно конкретным, и я стараюсь реализовать параллельные состояния на одной странице. Похоже, единственным доступным решением является использование ui-router-extras, которые позволяют использовать липкие состояния. – Sat

Несколько состояний для множественных просмотров на одной странице

ответ

Смежные вопросы