在AngularJS中，如何設置狀態/視圖以顯示與「根」視圖相同的「視圖」，如果需要，還可以作爲孫子顯示？

我有'主頁'查看'消息傳遞'視圖和'對話'視圖。我希望'家'視圖始終顯示'消息傳遞'視圖。這是很容易的部分，我在下面的代碼中完成了。但是當用戶點擊'消息傳遞'視圖中的鏈接時，我想：在AngularJS中，如何設置狀態/視圖以顯示與「根」視圖相同的「視圖」，如果需要，還可以作爲孫子顯示？

導航到「會話」視圖（下面的示例）。或
將「對話」視圖顯示爲「消息」的子項。

這是我到目前爲止的一個鏈接。我花了相當多的時間試圖讓這個工作，並沒有能夠做到'1'和'2'。這是我目前的狀態配置。您可以在此鏈接查看完整的例子：

http://plnkr.co/edit/eVhPAr4zGmsbiNUKdzz3?p=preview

homeApp.config(function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
     .state('home', { 
      url: '/', 
      views: { 
       '': { templateUrl: 'home.html', controller: "homeController" }, 
       '[email protected]': { templateUrl: 'messaging.html', controller: "messagingController" } 
      } 
     }) 
     .state('conversations', { 
      url: '/conversations', 
      views: { 
       '': { templateUrl: 'conversations.html', controller: "conversationsController" } 
      } 
     }) 
});

來源

2017-04-20 Bloodhound

。您想讓用戶可以在新視圖中打開會話視圖或在消息傳遞視圖下打開會話視圖，這是否正確？ – JeanJacques

@JeanJacques - 是的。基本上打開'對話'全屏或內部消息。 – Bloodhound

那麼你可以嘗試使用nested states or nested views做到這一點。

我不知道這是你想做的事，但看this plunker的方式，它使用嵌套的狀態是這樣的工作：我不知道理解你的問題

.state('home.nestedView', { 
     url: '/nestedView', 
     views: { 
      '': { templateUrl: 'conversations.html' } 
     } 
    })

來源

2017-04-20 13:55:55 JeanJacques

這很接近，但依靠「ui-sref」來加載視圖。我不能那樣做。我需要click事件中的函數來加載視圖。我改變了你的示例使用'$ state.go（「。nestedView」）;'在點擊事件和它的工作。 http://plnkr.co/edit/bkuCFvrFuRHOD15MQ0PP?p=preview。如果你能更新你的朋友並回答我會接受它。 – Bloodhound

@Bloodhound我更新了plunker，不使用'ui-sref'並使用'ng-click'命名。但我認爲你應該使用'ui-sref'來達到這個目的，因爲使用它可以更容易地閱讀你的代碼，你不需要參考你的控制器就可以知道鏈接的位置。 – JeanJacques

如何使用ui-sref並使該邏輯有條件？請記住，這是我的問題的重點。我想要一個鏈接來更改整個視圖或打開「消息」下的視圖。（我會用一些邏輯評估屏幕大小來決定要做什麼。） – Bloodhound

在AngularJS中，如何設置狀態/視圖以顯示與「根」視圖相同的「視圖」，如果需要，還可以作爲孫子顯示？

回答

相關問題