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

Question

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

示例如下:

我有一个全屏应用程序，带有响应式顶部菜单、全屏 Canvas 和绝对位于 Canvas Angular 落的控件。 Canvas 应几乎填满整个屏幕(不包括顶部菜单的空间)。

为了正确计算 Canvas 的高度，我需要知道顶部菜单的当前高度(其高度可变，例如基于视口(viewport)宽度)。

我在 Canvas 元素上放置了一个指令，该指令应该适本地调整 Canvas 的大小。

但问题是让指令“知道”菜单高度的最佳方法是什么？

• 我应该向指令传递一个额外的参数吗？
• 我应该创建一个全局服务来广播此信息吗？
• 我应该让父 Controller 来处理这个问题吗？
• 或者我应该使用完全不同的方法？

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

谢谢。

更新 示例代码

HTML block

<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 高度属性...

Answer 1

编辑: Plunker已添加。

在您的情况下，我将让指令负责重新调整包含标题和 Canvas 的元素的大小。像这样:

<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;

        }
    }
})

我觉得这是最有意义的，因为 Canvas 独立于标题，不应该知道它的存在。您可以在包装器中计算所需的大小并将其传递给 Canvas 指令或直接从包装器更改它。

一般来说，指令之间进行通信的最佳方式是通过隔离作用域。每个指令应尽可能独立于其他指令(以实现重用)。指令应该通过其范围初始化来接受参数，仅此而已。使用服务当然很好，但应该以一种不会纠缠您的组件的方式完成。