Media breakpoints

The media breakpoints service calls callback functions when a Bootstrap grid system breakpoint is hit. This allows you to manipulate the user interface programmatically when CSS media queries are not sufficient.

Dependencies


Media breakpoint methods

  • register(callback) — Registers a callback method with the service to be called any time a media breakpoint is hit. The callback function is called with the following arguments:
    • breakpoint — An object with xs, sm, md, and lg properties. The property that corresponds to the current breakpoint is set to true and the rest are set to false.
  • unregister(callback) — Unregisters the specified callback method. This should be called whenever the controller's $scope is destroyed.
  • getCurrent() — Gets the current media breakpoint object.

Demo

Resize the browser to watch the label below change when you hit a media breakpoint.
Current media breakpoint: {{mediaCtrl.status}}

Markup

<div ng-controller="MediaBreakpointsTestController as mediaCtrl">
  Resize the browser to watch the label below change when you hit a media breakpoint.
  <div class="alert alert-info" style="margin-top: 10px;">
    Current media breakpoint: <strong>{{mediaCtrl.status}}</strong>
  </div>
</div>

JavaScript

/*global angular */

(function () {
    'use strict';

    function MediaBreakpointsTestController($scope, bbMediaBreakpoints) {
        var self = this;

        function mediaBreakpointCallback(breakpoint) {
            var p;

            for (p in breakpoint) {
                if (breakpoint.hasOwnProperty(p) && breakpoint[p]) {
                    self.status = p;
                    break;
                }
            }
        }

        bbMediaBreakpoints.register(mediaBreakpointCallback);

        $scope.$on('$destroy', function () {
            bbMediaBreakpoints.unregister(mediaBreakpointCallback);
        });
    }

    MediaBreakpointsTestController.$inject = ['$scope', 'bbMediaBreakpoints'];

    angular.module('stache').controller('MediaBreakpointsTestController', MediaBreakpointsTestController);
}());