正确的方法-Angular JS中指令之间的通信

我想问一下在Angular应用程序中处理内部通信的最佳方法是什么

示例如下：

我有一个全屏应用程序，它有一个响应式顶部菜单、一个全屏画布和控件，这些控件完全位于画布的角落。画布应该几乎填满整个屏幕（不包括顶部菜单的空间）。

为了正确计算画布的高度，我需要知道顶部菜单的当前高度（它有可变的高度，例如基于视口宽度）。

我在画布元素上放置了一个指令，它应该适当地调整画布的大小。

但问题是，让指令"知道"菜单高度的最佳方式是什么

• 我应该给指令传递一个额外的参数吗
• 我应该创建一个全球服务来广播这些信息吗
• 我应该让一个父控制器来处理这个吗
• 还是应该使用完全不同的方法

关于应用程序架构模式，Angular官方文档似乎不是很有用。

谢谢。

更新 示例代码

HTML区块

<div workspace-height>
    <div ng-include="'components/mainmenu/mainmenu.html'" id="mainMenuWrapper"></div>
    <div id="workspace" ng-style="heightMenuExcluded">
        <div ng-include="'components/tools/tools.html'" id="toolsWrapper"></div>
        <div ng-include="'components/canvas/canvas.html'" id="canvasWrapper"></div>
    </div>
</div>

指令

'use strict';
    angular.module('photoedit')
            .directive('workspaceHeight', ['$window', '$timeout',
                function ($window, $timeout) {
                    return {
                        restrict: 'A',
                        link: function (scope, element, attrs) {
                            var window = angular.element($window),
                                body = angular.element('body'),
                                mainMenu = element.find('#mainMenuWrapper'),
                                workspace = element.find('#workspace')
                            ;
                            console.log(window);
                            console.log(body);
                            console.log(mainMenu);
                            console.log(workspace);
                            console.log(window.height());
                            console.log(body.height());
                            console.log(mainMenu.height()); // null
                            console.log(workspace.height());

                            window.on('resize', function(){
                                var height = workspace.css('height', body.height() - mainMenu.height());
                                scope.heightMenuExcluded = {'height':height + 'px'};
                            });
                            window.trigger('resize');

                        }
                    };
                }
            ]);

我无法访问mainMenu高度属性。。。

<canvas-app-wrapper>
    <header></header>
    <canvas></canvas>
</canvas-app-wrapper>

app.directive('canvasAppWrapper', function() {
    return {
        restrict: 'E',
        link: function(scope, el) {
            var canvas = el.find('canvas');
            var header = el.find('header');
            var headerHeight = header[0].offsetHeight;
            canvas[0].height = el[0].offsetHeight - headerHeight;
            canvas[0].width = el[0].offsetWidth;
        }
    }
})