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

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

$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', подвиды второго раздела отображаются нормально. Я предполагаю, что мне нужно быть более точным в том, как я ссылаюсь на родителя каждого подпредставления. Я что-то здесь упускаю?

Источник

1 ответ

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

Пожалуйста, посмотрите на демонстрацию ниже или на эту скрипку.

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>

Источник
Другие вопросы по тегам