winWheel angularJS directive

view.tpl.html

//spin = {wwOptions:{...}, wwObj:{}}
<winwheel ww-options="spin.wwOptions" ww-obj="spin.wwObj"></winwheel>

winwheelDirective.js

angular.module('app').factory('Winwheel',['$window', function($window) {
    if ($window.Winwheel) {
        // https://github.com/zarocknz/javascript-winwheel/issues/24
        $window.Winwheel.prototype.drawWheelImage = function()
        {
            // Double check the wheelImage property of this class is not null. This does not actually detect that an image
            // source was set and actually loaded so might get error if this is not the case. This is why the initial call
            // to draw() should be done from a wheelImage.onload callback as detailed in example documentation.
            if (this.wheelImage != null) // jshint ignore:line
            {
                // Work out the correct X and Y to draw the image at. We need to get the center point of the image
                // aligned over the center point of the wheel, we can't just place it at 0, 0.
                var imageLeft = (this.centerX - (this.canvas.height / 2));
                var imageTop  = (this.centerY - (this.canvas.width / 2));

                // Rotate and then draw the wheel.
                // We must rotate by the rotationAngle before drawing to ensure that image wheels will spin.
                this.ctx.save();
                this.ctx.translate(this.centerX, this.centerY);
                this.ctx.rotate(this.degToRad(this.rotationAngle));
                this.ctx.translate(-this.centerX, -this.centerY);

                this.ctx.drawImage(this.wheelImage, imageLeft, imageTop, this.canvas.width, this.canvas.height);

                this.ctx.restore();
            }
        };

        return $window.Winwheel;
    } else {
        return {};
    }
}]).directive('winwheel', ['$state', '$timeout', '$window', 'Winwheel', function ($state, $timeout, $window, Winwheel) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            wwOptions: '=',
            wwObj: '=?',
        },
        templateUrl: "app/directives/winwheel/winwheelTemplate.tpl.html",
        link: function(scope, element, attrs, modelController) {

            var options;
            var canvas;
            var image;

            canvas = element.find('canvas');
            scope.canvasId = Math.random().toString(36).substring(2, 15);

            options = angular.extend({
                'canvasId'    : scope.canvasId,
                'numSegments' : 6,
            }, scope.wwOptions);
            canvas.attr('id', options.canvasId);
            canvas.attr('width', canvas.width());
            canvas.attr('height', canvas.width());

            load(options);

            function resize() {
                var width;
                //https://github.com/zarocknz/javascript-winwheel/issues/24
                //on resize rebuild entire graph
                canvas.attr('width', "");
                canvas.attr('height', "");
                canvas.css('width', "");
                canvas.css('height', "");
                width = canvas.width();

                canvas.attr('width', width);
                canvas.attr('height', width);
                canvas.css('width', width);
                canvas.css('height', width);
                load(options);
                // scope.wwObj.draw();
            }
            angular.element($window).on('resize', resize);

            scope.$on('$destroy', function () {
                angular.element($window).off('resize', resize);
            });

            function load(options) {
                options = angular.copy(options);
                if (scope.wwObj.rotationAngle) {
                    // options.rotationAngle = scope.wwObj.getRotationPosition();
                }
                // console.log(scope.wwObj.rotationAngle);
                scope.wwObj = new Winwheel(options);

                if (options.imgSrc) {
                    image = new Image();
                    image.onload = function()
                    {
                        image.width = canvas.width();
                        image.height = canvas.width();
                        scope.wwObj.wheelImage = image;
                        scope.wwObj.draw();
                    };
                    image.src = options.imgSrc;
                }
            }
        }
    };
}]);

winwheelTemplate.tpl.html

<div class="winwheel-directive">
    <canvas>
        Canvas not supported, use another browser.
    </canvas>
</div>

ww.css

.winwheel-directive {

    canvas {
        display: block;
        width: 100%;
        height: 100%;
    }

}