Numeric Spinner Directive

numericSpinner.html

<input id="{{id}}" type="text" name="" ng-model="value" />
<span class="add" ng-click="add()">+</span>
<span class="remove" ng-click="subtract()">-</span>

numericSpinner.js

/// <reference path="../_references.js" />

mainModule.directive('numericSpinner', function () {
    return {
        restrict: 'E',
        templateUrl: '/Application/Directives/NumericSpinner.html',
        scope: {
            minValue: '@minValue',
            defaultValue: '@defaultValue',
            id: '@textId',
            value: '=ngModel'
        },
        link: function ($scope, $elem, $attrs) {
            $scope.value = $scope.defaultValue;
            $scope.add = function () {
                $scope.value++;
            };
            $scope.subtract = function () {
                if ($scope.value > $scope.minValue)
                    $scope.value--;
            };

            $elem.find('input').bind('mousewheel DOMMouseScroll', function (event, delta) {
                if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
                    $scope.value++;
                    $scope.$apply();
                }
                else {
                    if ($scope.value > $scope.minValue) {
                        $scope.value--;
                        $scope.$apply();
                    }
                }
            });
        }
    };
});