AngularJS 让 ng-view 在其 div 之外显示动态页脚答案

【问题标题】：AngularJS have ng-view display a dynamic footer outside of its divAngularJS 让 ng-view 在其 div 之外显示动态页脚
【发布时间】：2013-06-29 21:32:06
【问题描述】：

我对 angular.js 还很陌生，所以我正在寻求有关如何最好地实现此处描述的功能的建议。我有一个带有标题、侧边栏和<div class="container-fluid" ng-view></div> 提供的内容区域的html 正文。因为这是标准的 twitter-bootstrap 布局，ng-view 不是body 元素的直接后代。

我有一个包含无限滚动列表的视图。当至少选择列表的一个元素时，我想向上滑动一个包含上下文操作的页脚（页脚应为position:fixed，以便它始终显示在列表顶部）。本质上，这类似于右键单击磁贴时在 Windows 8 Metro 主屏幕上发生的情况。

我现在遇到的问题是页脚不能成为 ng-view 部分的一部分，因为它需要直接位于 DOM 中的 body 下。当我想为列表和动态页脚保留一个控制器时，使用 Angular.js 和 ng-view 处理这个问题的好方法是什么？如果有一个 CSS 解决方案，我也很高兴听到它。

【问题讨论】：

标签： javascript css angularjs

【解决方案1】：

听起来您需要将页脚放在ng-view 元素之外才能处理您想要的布局。我将把布局/CSS 留给你，但下面的示例演示了一种与指令通信的方式，如果它位于 ng-view 之外。

这是一个 plunkr (http://plnkr.co/edit/NpoIrOdfvn9XZiXY9YyV?p=preview)。

HTML

<body ng-app="someApp">
    <div ng-view></div>
    <footer-directive></footer-directive>
</body>

angular.module('someApp', []).config(function($routeProvider) {
    $routeProvider.when('/', {
        template: '<p>template</p>',
        controller: 'SomeCtrl'
    }).otherwise({
        redirectTo: '/'
    });
}).service('broadcastService', function($rootScope, $log) {
    this.broadcast = function(eventName, payload) {
        $log.info('broadcasting: ' + eventName + payload);
        $rootScope.$broadcast(eventName, payload);
    };
}).controller('SomeCtrl', function(broadcastService, $log, $timeout) {
    //fire off showfooter message
    broadcastService.broadcast('ShowFooter', {
        some: 'data'
    });

    // wait 3 seconds and hide footer
    $timeout(function() {
        //fire off hide message
        broadcastService.broadcast('HideFooter');
    }, 3000);

}).directive('footerDirective', function(broadcastService, $log) {
    return {
        restrict: 'E',
        link: function(scope, elm, attr) {
            elm.hide();
            scope.$on('ShowFooter', function(payload) {
                $log.info('payload received');
                $log.debug(payload);
                // assuming you have jQuery
                elm.show();
            });
            scope.$on('HideFooter', function() {
                // assuming you have jQuery
                elm.hide();
            });
        }
    }
});

【讨论】：

如何解决不同的 ng-views 想要换出在 Footer 中显示的模板（+ 控制它）的问题？
将指令/控制器置于 ng-view 之外可防止它们被换出。
但这正是我想要完成的。页脚的内容应该随着 ng-view 的变化而变化
所以...您想要一个视图与列表和页脚一起加载？所以这更像是一个布局问题？原谅我的无知，我只是想画一幅画。你有小提琴或笨蛋要分享吗？
是的，这正是我想要做的。然而，由于布局限制，页脚必须位于 ng-view 之外。大概是我傻了吧。我现在正在尝试装饰 $dialog 来做我的竞标并动态注入页脚。