Javascript AngularJS让ng视图在其div之外显示动态页脚_Javascript_Css_Angularjs

Javascript AngularJS让ng视图在其div之外显示动态页脚

javascript css angularjs

Javascript AngularJS让ng视图在其div之外显示动态页脚,javascript,css,angularjs,Javascript,Css,Angularjs,我是angular.js的新手，所以我正在寻求如何最好地实现这里描述的功能的建议。我有一个带有标题、边栏和内容区的html正文，由提供。因为这是一个标准的twitter引导布局，ng视图不是body元素的直接后代我有一个视图将包含一个无限滚动列表。当至少选择了列表中的一个元素时，我希望向上滑动一个包含上下文操作的页脚（页脚应为position:fixed，以便它始终显示在列表的顶部）。本质上，这类似于在Windows 8 Metro主屏幕上右键单击互动程序时发生的情况我现在遇到的问题是页脚不

我是angular.js的新手，所以我正在寻求如何最好地实现这里描述的功能的建议。我有一个带有标题、边栏和内容区的html正文，由

提供。因为这是一个标准的twitter引导布局，

ng视图

不是

body

元素的直接后代

我有一个视图将包含一个无限滚动列表。当至少选择了列表中的一个元素时，我希望向上滑动一个包含上下文操作的页脚（页脚应为

position:fixed

，以便它始终显示在列表的顶部）。本质上，这类似于在Windows 8 Metro主屏幕上右键单击互动程序时发生的情况

我现在遇到的问题是页脚不能是

ng视图

partial的一部分，因为它需要直接位于DOM中的

主体下。当我想为列表和动态页脚保留一个控制器时，使用Angular.js和ng view
处理这个问题的好方法是什么？如果有一个CSS解决方案，我也很高兴听到它
 听起来您需要将页脚置于ng视图
元素之外，以便处理所需的布局。我将把layout/CSS留给您，但是下面的示例演示了一种与指令通信的方法，如果它位于ng视图之外
这是一个plunkr（）
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();
            });
        }
    }
});

angular.module（'someApp'，[]）.config（函数（$routeProvider）{
$routeProvider.when（“/”{
模板：“模板”，
控制器：“SomeCtrl”
}).否则({
重定向到：'/'
});
}).service（'broadcastService'，函数（$rootScope，$log）{
this.broadcast=函数（事件名称、有效负载）{
$log.info（'广播：'+eventName+payload）；
$rootScope.$broadcast（事件名称、有效负载）；
};
}).controller（'SomeCtrl'，函数（广播服务，$log，$timeout）{
//触发showfooter消息
broadcastService.broadcast（'ShowFooter'{
一些人说：“数据”
});
//等待3秒钟并隐藏页脚
$timeout（函数（）{
//触发隐藏消息
broadcastService.broadcast（'HideFooter'）；
}, 3000);
}).directive（'footerDirective'，函数（broadcastService，$log）{
返回{
限制：'E'，
链接：功能（范围、elm、属性）{
榆树皮（）；
作用域：$on（'ShowFooter'，函数（有效负载）{
$log.info（'收到有效负载'）；
$log.debug（有效负载）；
//假设您有jQuery
elm.show（）；
});
作用域：$on（'HideFooter'，函数（）{
//假设您有jQuery
榆树皮（）；
});
}
}
});
这如何解决不同ng视图不需要交换页脚中显示的模板（+control it）的问题？让指令/控制器位于ng视图之外可以防止它们交换。但这正是我想要实现的。页脚的内容应随ng viewso更改。。。是否要加载包含列表和页脚的视图？所以这更像是一个布局问题？请原谅我的无知，我只是想画一幅画。你有提琴或弹琴要分享吗？是的，这正是我想要做的。但是，由于布局限制，页脚必须位于ng视图之外。可能只是我太傻了。我现在正在尝试装饰$dialog来进行我的投标并动态地注入页脚。