Responsive Hide, for AngularJS

README.md

Responsive Hide.

Hide a element based on a breakpoint.

Usage

 <div class="recipe" ng-repeat="(index, recipe) in recipes" responsive-hide="{{ (288 * (index+1)) }}" responsive-hide-watch="recipes">
      ...
 </div>

responsive-hide you use it to define your breakpoint.

responsive-hide-watch you use it to define a variable to watch to run a directive again, or, when you change that value.

responsiveHide.js

angular.module('app')
    .directive('responsiveHide',function($timeout){
        'use strict';

        var linker = function(scope, element, attrs) {
            var breakpoint = parseInt( attrs['responsiveHide'].replace('px', '') ),
                listner = attrs['responsiveHideWatch'];

            var vanisher = function(){
                if ($(window).width() < breakpoint) {
                    element.addClass('hide');
                } else {
                    element.removeClass('hide');
                };
            }

            $(window).resize(function(){
                vanisher();
            });

            if (listner) {
                scope.$watch(listner, function(){
                    vanisher();
                });
            };

            $timeout(function(){
                vanisher();
            });
        };

        return {
            restrict:'A',
            link: linker
        };
    });