JSFiddle - React, Tailwind, and code Playground

For SO question: http://stackoverflow.com/questions/35241783/eval-directives-parameters-angular/35242078#35242078

by Shaun Scovil

HTML

<div parallax-bg parallax-active="!(tablet || mobile)">
  ...
</div>

JavaScript

angular.module('myApp', [])
  .factory('$widthWatcher', widthWatcherFactory)
  .directive('parallaxBg', parallaxBgDirective)
;

function widthWatcherFactory() {
  return {
    isMobile: isMobile,
    isScreen: isScreen,
    isTablet: isTablet
  };
  
  function getWidth() {
    return window.innerWidth || document.body.clientWidth;
  }
  
  function isMobile() {
    return getWidth() < 600;
  }
  
  function isScreen() {
    return getWidth() > 960;
  }

  function isTablet() {
    return !isMobile() && !isScreen();
  }
}

function parallaxBgDirective($widthWatcher) {
  return {
    link: postLink,
    template: '<ng-transclude></ng-transclude>',
    transclude: true
  };
  
  function postLink(scope, iElement, iAttrs) {
    alert($widthWatcher.isScreen());
  };
}