AngularJS directive that set breakpoints for responsive designed websites
1 person uses it
Author: 60594?v=3 snapjay

AngularJS Breakpoint

AngularJS directive that set breakpoints for responsive websites.

Add the breakpoint directive to the body tag Define as many breakpoints as you want in an object Current breakpoint class and window width available in scope


Add the breakpoint attribute to the body tag and give it a value off an object defined as follows: Set the key as the smallest value you want the breakpoint to start at and the value as the name of the class you want added to the body tag. The values do not need to be in numerical order. I recommend that the lowest value is 0 <body breakpoint="{0:'smallscreen', 750:'break750', 500:'break500', 1000:'break1000', 1500:'break1500'}"> ... </body> The 'current class' and 'current window width' are available on the scope as break1500 and 1680


You can set a listener on any scope within your app, by using the scope method $on. The triggered event is called right after the class of the element has been changed. $scope.$on('breakpointChange', function(event, breakpoint, oldClass) { console.log('Entering:' + breakpoint.class); console.log('Leaving:' + oldClass); console.log('windowSize' + breakpoint.windowSize); });

Download on Github

Version 0.1:


This work is licensed under a Creative Commons Attribution 3.0 Unported License. If you use the script, please let me know @snapjay; Don't worry, I won't ask for anything!


Dan Shreim @snapjay

comments powered by Disqus
This page was last updated about 5 years ago.