Question

我对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解决方案，我也很高兴听到它。

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

<强> JS

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();
            });
        }
    }
});

AngularJS在其div之外显示动态页脚

1 个答案: