0

複数のビューを含む 1 つのページでネストされたビューをターゲットにするのに問題があります。これが私のコードです。

$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>

私の2つのセクションへのhtml

<!-- 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」の上に配置すると、2 番目のセクションのサブビューが正常に表示されます。各サブビューの親を参照する方法をより具体的にする必要があると思います。ここで何か足りないのですか？

4

1 に答える 1