angularjs - angularjs アプリの基本的な動作と構造

Question

私はangularjsに自己紹介しようとしています。

チュートリアルを完了し、基本的なビルドのビデオを見ましたが、多かれ少なかれ大規模なアプリケーションの動作とアーキテクチャにまだ苦労しています。

私のアプリケーションには、追加ボタンを含むメニューバーがあります。ユーザーがボタンをクリックすると、ダイアログがポップアップします。そのダイアログはメニューの一部ではありません:

<!-- The menu -->
<header class="mod modHeader" ng-controller="HeaderCtrl">
  <div class="modHeader__addProject" ng-click="openAddDialog()">
    <i class="icon-plus icon-2x"></i>
  </div>
</header>

<!-- the dialog -->
<div class="modNewProject" ng-show="properties.AddDialogVisibility" ng-controller="HeaderCtrl">
    <!-- content stripped out -->
</div>

私の意図はproperties、コントローラーのスコープ内にオブジェクトを作成しHeaderCtrl、そのボタンをクリックしてブール値を変更することでした。

// HeaderCtrl
function HeaderCtrl($scope){
  $scope.properties = {
    "AddDialogVisibility": false
  };

  $scope.openAddDialog = function () {
    $scope.properties.AddDialogVisibility = true;
  };

}

現在、複数の問題と質問があります。

• プロパティ オブジェクトにアクセスするには、ダイアログに HeaderCtrl を適用する必要があります。これは私にとって厄介です。HeaderCtrl はヘッダー モジュールのみを制御する必要があります。
• ダイアログはクリックしても表示されません。これは、プロパティがページの読み込み時に一度だけチェックされるためであり、関数を使用する必要があることがわかりました。私の目標を達成するための適切な方法は何ですか?

結論：

私の質問を要約すると、次
のようになります。ページの各セクションにコントローラーを使用します。彼らはどのように通信しますか？