用AngularJS中的一個控制器交流兩個視圖

-1

我正在使用用於Angular的UI-Router，並且爲我的應用程序分隔了視圖：sidebar和main。現在，我需要在側欄視圖中執行一些操作後在主視圖中更改某個類。用AngularJS中的一個控制器交流兩個視圖

所以，這是我的代碼：

配置

.state('app.area', { 
    url: '/area/:areaId', 
    views: { 
     '@': { 
      template: require('./app/generic/genericWithSidebar.html'), 
      controller: 'AreaCtrl' 
     }, 
     '[email protected]': { 
      template: require('./app/area/_area.html'), 
      controller: 'AreaCtrl', 
      controllerAs: 'CTRL', 
     }, 
     '[email protected]': { 
      template: require('./app/area/_sidebar.html'), 
      controller: 'AreaCtrl', 
      controllerAs: 'CTRL', 
     } 
    },

控制器

class AreaCtrl { 
    constructor($scope) { 
     "ngInject"; 

     this.$scope = $scope; 
     this.$scope.descriptionIsActive = false; 
    } 

    showAreaDescription() { 
     this.$scope.descriptionIsActive = !this.$scope.descriptionIsActive; 
    } 
} 

export default AreaCtrl;

和視圖側邊欄和主

// sidebar view 
<span ng-click="CTRL.showAreaDescription()">show more</span> 
// main view 
<div ng-class="{'active': CTRL.descriptionIsActive}"></div>

我需要在視圖之間進行通信，而不是控制器，我有一個控制器。

來源

2017-02-09 Lukas

需要注意的是，每個視圖初始化一個新的'AreaCtrl'實例，每個實例都有它自己的作用域 – charlietfl

@charlietfl那麼，我該怎麼做？我應該刪除控制器定義的視圖，只留下父母？ – Lukas

可能.....是。雖然 – charlietfl

「正確」的解決方案嵌套視圖取決於它是什麼改變了，導致在導航的改變你的主要觀點。

因爲我只是answered here，如果你需要控制器互相「交談」，這通常是一個不好的跡象。這通常意味着您應該有一個service，負責在兩個視圖中處理要綁定的數據/狀態。如果你的變化真的只是一個全球化妝品導航的東西（我想不出一個例子，但我不想說這是不可能的），但是一個「全球」NavigaitonController（例如你的body）可能是正確的。但我對此表示懷疑。

所以我的建議是：想想什麼樣的數據導致了這個變化，在它自己的服務中處理這些數據的狀態並綁定到你需要它的服務屬性。

來源

2017-02-09 13:43:44 LionC

所以，這可以確定我用了一個，其他控制器在側邊欄中的行動？在這種情況下，一切工作正常。 Thx從頂部的建議。 – Lukas

您可以在views選項之外定義您的控制器，以便它僅在狀態加載時加載一次。

stateProvider.state("app.area",{ 
    url:'/app.area', 
    templateUrl: 'app_area_frame.html', 
    controller:'AreaCtrl', 
    controllerAs: 'CTRL', 
    views:{ 
     'main':{ 
      template: require('./app/area/_area.html') 
     }, 
     'sidebar':{ 
      template: require('./app/area/_sidebar.html') 
     } 
    } 

})

爲UI-routerdocs

來源

2017-02-09 13:40:20

不，我沒有訪問控制器的意見:( – Lukas

你是怎麼說的？:) –

簡單，動作形式控制器沒有傳播，我在主視圖中使用它的工作正常... – Lukas

狀態意味着被服務封裝，所以實際上，如果你有應該在應用程序之間共享的狀態，你應該創建一個服務。

或者，您可以將控制器放在更高的範圍內，例如您擁有應用程序的控制器，然後可以通過側欄和主頁子範圍繼承控制器。

來源

2017-02-09 13:44:40 SamMorrowDrums

也許這個答案並不是您的特定問題的確切答案。但是從架構的角度來看，您不應該使用嵌套視圖來通過側邊欄來處理主視圖。

因爲這個側邊欄對於所有狀態應該是相同的。所以如果你使用嵌套視圖，你應該每次都指定你的側邊欄。你也應該在每個州編寫側邊欄的代碼。這不是設計您的應用程序的推薦方式。

我強烈建議你通過這個Q&A。

那麼如何設計？

使您的邊欄成爲一個簡單的模板，並使用ng-include來渲染頁腳部分。

<footer ng-include="'/sidebar.html'" ng-controller="sidebarController"></footer>

正如你可以看到有你的側邊欄的專用控制器，你不必重複你的代碼添加到每個主控制器。

來源

2017-02-09 13:52:00

不，側欄對於不同的頁面會有所不同，所以我需要爲它和主要部分分隔子視圖。 – Lukas

@Lukas好吧，如果情況是這樣的，那麼使用嵌套視圖。 –

用AngularJS中的一個控制器交流兩個視圖

回答

相關問題