AngularJSで1つのコントローラと2つのビューを通信

Question

私はUI-Router for Angularを使用しています。私はサイドバーとメインのビューを分離しています。今私は、サイドバーのビューで行ういくつかのアクションの後、メインビューでいくつかのクラスを変更する必要があります。

だから、これは私のコードです：

設定

.state('app.area', { 
    url: '/area/:areaId', 
    views: { 
     '@': { 
      template: require('./app/generic/genericWithSidebar.html'), 
      controller: 'AreaCtrl' 
     }, 
     'main@app.area': { 
      template: require('./app/area/_area.html'), 
      controller: 'AreaCtrl', 
      controllerAs: 'CTRL', 
     }, 
     'sidebar@app.area': { 
      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> 

コントローラ間で通信する必要がありますが、コントローラが1つあります。

Answer 1

「正しい」解決のための

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') 
     } 
    } 

}) 

ネストされたビューは、ナビゲーションの変化を引き起こすあなたのメインビューに変更されたことが何であるかに依存します。

私がちょうどanswered hereのように、コントローラがお互いに「話す」必要がある場合は、一般的には悪い兆候です。これは、多くの場合、両方のビューでバインドするデータ/状態を処理するserviceを持つ必要があることを意味します。

しかし、あなたの変更は実際にはグローバルな化粧品ナビゲーションのもの（私は例を考えることはできませんが、それは不可能だと言いたくありません）、 "グローバル" NavigaitonController（例えばbody）正しいかもしれない。私はそれを疑う。

私の提案は：どのデータが変更を引き起こすかを考え、それ自身のサービスでそのデータの状態を処理し、必要なサービスプロパティにバインドします。

Answer 2

コントローラをviewsオプションの外に定義すると、状態ロード時に1回だけロードされるようにすることができます。 UI-routerdocs

Answer 3

状態はサービスによってカプセル化されるため、実際には、アプリケーション全体で共有されるべき状態がある場合は、サービスを作成する必要があります。

また、コントローラ用のコントローラがあり、サイドバーとメインページの子スコープで継承できるコントローラを使用することもできます。

Answer 4

おそらく、この回答はあなたの特定の質問の正確な答えではありません。しかし、アーキテクチャの観点から見ると、サイドバーでメインビューを処理するためにネストされたビューを使用すべきではありません。

このサイドバーは、すべての州で同じである必要があります。したがって、ネストされたビューを使用している場合は、毎回サイドバーを指定する必要があります。また、すべての州にサイドバーのコードを記述する必要があります。これは、アプリケーションを設計するための推奨方法ではありません。

Q&Aを強くお勧めします。

どのように設計するのですか？

サイドバーを単純なテンプレートとして作成し、ng-includeを使用してフッター部分をレンダリングします。

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

ご覧のとおり、サイドバー専用のコントローラがあり、コードを各メインコントローラに複製する必要はありません。