javascript - Angular は ng-view 以外の可視性をブロックします

Question

私のアプリケーションには ng-view とほぼ 40 個のコントローラーがあり、2 つのボタン ブロックと、このブロックの 1 つはメイン ページにのみ表示され、2 番目のブロックは残りのページに表示されます (例ではボタン ブロック 2 つ 1 つのボタンを単純化しました)。また、一部のページでは、そのボタンはまったく必要ありません。

 <div id="body">
     <div id="header" ng-if="!hideHeader">
         <button class="button" ng-if="mainPage"/>
         <button class="button" ng-if="!mainPage"/>
     </div>
     <div ng-view=""/>
 <div>

これらのボタンは $rootScope に属し、要素はルート スコープ変数に応じて表示または非表示になります。ルートが変更されるたびに呼び出されるルートスコープにリスナーを作成しました。しかし、その場合、ng-viewがビューを変更する前に、あるボタンブロックが別のボタンブロックで変更されたことが分かります。

$rootScope.$on('$routeChangeStart', function(next, current) {
    $rootScope.hideHeader = true;
});

2 番目の解決策は、コントローラーで hideHeader 変数を設定することです。ただし、その場合、各コントローラーでこの変数を設定する必要があります。その場合、ソリューションのサポートは困難になります。たとえば、1 つのページにのみ表示する別のボタン ブロックを追加します。これは、すべてのコントローラーを書き直す必要があることを意味します。

そのための最善の解決策は何ですか？