3

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

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

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

4

1 回答 1

3

听起来您需要将页脚放在ng-view元素之外才能处理您想要的布局。我将把 layout/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();
            });
        }
    }
});
于 2013-07-02T15:11:17.053 回答