JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<div ng-app="demoApp" ng-controller="mainController">
    window width debugging: {{window.width}}
    <equalizer options="equalizerOptions" width="{{window.width}}" resize>
    </equalizer>

    <button ng-click="equalizerOptions.group = !equalizerOptions.group">
        toggle group
    </button>
    <button ng-click="removeEqualizer()">
        remove equalizer (test unbinding resize)
    </button>
</div>

JavaScript

angular.module('demoApp', [])
    .controller('mainController', function($scope) {
        $scope.equalizerOptions = {
            group: true
        };
        $scope.removeEqualizer = function() {
            // just for testing if resize handler is removed
            var equalizer = angular.element(document).find('equalizer');
            //console.log(angular.element(document).find('equalizer').scope());
            equalizer.scope().$destroy();
            equalizer.remove();
        }
    })
    .directive('equalizer', equalizerDir)
    .directive('resize', resizeDir);

function resizeDir($window) {
    return {
        link: function(scope, element, attrs) {
            scope.window = {};

            function onResize(event) {
                //console.log('Resized', scope, element, event);
                scope.window.width = $window.innerWidth;
            }

            $window.onresize = function(evt) {
                //console.log('Resize');
                scope.$apply(onResize);
            };

            onResize(); //initial call

            scope.$on('$destroy', function() {
                //console.log('destroy dir');
                $window.onresize = undefined;
            });
        }
    };
}

function equalizerDir($timeout) {
    return {
        scope: {
            options: '=',
            width: '@'
        },
        template: '<div ng-if="width >= 400"><h2>equalizer with ng-if & resize dir</h2>' +
            '<p>{{options.group ? \'grouped\': \'not grouped\'}}</p></div>',
        link: function(scope, element, attrs) {
            /*scope.$watchCollection('options', function() {
            	// would work but watch with ternary operator directly in markup is easier
            	scope.text = scope.options.group ? 'grouped': 'not grouped';  
            });*/
        }
    };
}