AngularJS allows for the ng-view directive to showcase a dynamic footer element that is positioned outside of its

Question

AngularJS allows for the ng-view directive to showcase a dynamic footer element that is positioned outside of its

I am relatively new to using angular.js and I could use some guidance on the best approach to implementing the functionality described in this scenario. My HTML structure consists of a header, sidebar, and content area provided by

<div class="container-fluid" ng-view></div>

. Since this layout follows the standard twitter-bootstrap format, the ng-view element is not a direct child of the body element.

I need to create a view that features an infinitely scrollable list. When a list item is selected, I want to reveal a fixed footer with context-specific actions (the footer should always be displayed above the list). Essentially, this is similar to the behavior seen on the Windows 8 Metro home-screen when right-clicking on a tile.

The challenge I am facing is that the footer cannot be included in the ng-view partial because it needs to reside directly under the body in the DOM. What would be a good approach to handling this situation with Angular.js and ng-view, especially if I prefer to use a single controller for both the list and the dynamic footer? If there is a CSS-based solution available, I would appreciate any suggestions on that front as well.

javascript css angularjs

Answer 1

Answer №1

To achieve the desired layout, it is recommended to place the footer outside the ng-view element. Below is an example demonstrating how to communicate with a directive located outside ng-view:

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

Answer 2

To achieve the desired layout, it is recommended to place the footer outside the ng-view element. Below is an example demonstrating how to communicate with a directive located outside ng-view:

Check out this 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 allows for the ng-view directive to showcase a dynamic footer element that is positioned outside of its

Answer №1

Similar questions

The default choice vanishes once a non-empty option is chosen

Attempting to load the parent window of a framed page from a separate domain results in a permission denial issue in Internet

When clicking on a Bootstrap button, there is no visible outline

Issue with Material UI components: The Select component is collapsed and the autoWidth functionality is not

The animation will only activate upon the initial click of the button

Storing a JSON response in a variable

The Blueimp File Uploader seems to be sending numerous submissions at once

What is the best way to implement a sub-menu using jQuery?

Can someone help me figure out this lengthy React error coming from Material UI?

In Opera, the presence of links is resulting in the displacement of text upwards

Faux CSS, every other moment appears to be unsuccessful

Discover the best methods for accessing all pages on a Facebook account

Math operations limited by boundaries: adding and subtracting

show various commands and outcomes of the getElementsByClassName() function

Passing data between functions in a JavaScript file

Modify the hash URL in the browser address bar while implementing smooth scrolling and include the active class

Retrieving the checkbox value from a dropdown selection

Having trouble loading the DOM element within the child component

Extracting a precise data point stored in Mongo database

Providing both app and io as parameters to a module