JSFiddle - React, Tailwind, and code Playground

by Shaun Scovil

HTML

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

JavaScript

angular.module('myApp', [])
  .directive('widthWatcher', widthWatcherDirective)
  .directive('parallaxBg', parallaxBgDirective)
;

function widthWatcherDirective() {
  return {
    link: postLink,
    template: '<ng-transclude></ng-transclude>',
    transclude: true
  };
  
  function postLink(scope, iElement, iAttrs) {
    scope.mobile = false;
    scope.screen = true;
    scope.tablet = false;
    alert('widthWatcher link function called');
  };
}

function parallaxBgDirective($timeout) {
  return {
    link: postLink,
    template: '<ng-transclude></ng-transclude>',
    transclude: true
  };
  
  function postLink(scope, iElement, iAttrs) {
    alert('parallaxBg link function called');
    $timeout(function() {
      alert(scope.$eval(iAttrs.parallaxActive));
    });
  };
}