AngularJS UI-Router多個視圖-僅在視圖中加載

Question

在AngularJS中，如何僅加載特定的命名視圖？ 例如，在下面的代碼中，如果選擇了contact，我希望它僅在bottomview中加載，並保持其余視圖（例如topview）不變。 不幸的是，AngularJS正在加載所有視圖。 知道我在做什么錯嗎？

.state('home', {
    url: '/home',
    views: {
        'topview': {templateUrl: 'top.html'},
        'bottomview': {templateUrl: 'bottom.html'}
    }
})

.state('contact', {
    url: '/contact',
    views: {
        'bottomview': {templateUrl: 'contact.html'}
    }
})

Answer 1

您的想法很好，並且可以通過狀態嵌套來實現：

.state('home', {
    url: '/home',
    views: {
        'topview': {templateUrl: 'top.html'},
        'bottomview': {templateUrl: 'bottom.html'}
    }
})

.state('home.contact', {
    url: '/contact',
    views: {
        'bottomview@': {templateUrl: 'contact.html'}
    }
})

因此，“聯系”現在是“家”的子狀態，這意味着

• 父級加載的所有視圖（“首頁”）
• 而不是由孩子代替（“聯系人”）

選擇contact時不會重新加載。

注意，以防萬一，我們以index.html的bottomView為目標，我們需要使用視圖絕對命名 'bottomview@' ，例如，在此處檢查更多詳細信息Angularjs ui-router未到達子控制器