Skip to content

Instantly share code, notes, and snippets.

@jdelibas

jdelibas/index.html

Last active Sep 29, 2017
Embed
What would you like to do?
TouchSpin directive for Angular.js
<html>
<body>
//Note the value attribute rather than ng-model
<spin value="someScopeValue" min="1" max="{{someOtherScopeValue}}" step="2" />
$scope.someScopeValue = 2;
$scope.someOtherScopeValue = 20;
</body>
</html>
MIT License
Copyright (c) [2016] [James Delibas]
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
app.directive('spin', function() {
return {
templateUrl: 'spinner.html',
scope: {
'value' : "="
},
restrict: 'E',
link: function(scope, element, attrs, ngModel) {
var min,max,step,value,input,initial;
element = angular.element(element);
if(typeof attrs === 'undefined'){
throw new Error('Spin.js attributes missing');
} else {
min = typeof attrs.min !== 'undefined' ? attrs.min : 0;
max = typeof attrs.max !== 'undefined' ? attrs.max : 999;
step = typeof attrs.step !== 'undefined' ? attrs.step : 1;
initial = parseInt(scope.value);
input = $("input[name='spin']",element);
input.TouchSpin({
min: min,
max: max,
step: parseInt(step),
initval: initial,
forcestepdivisibility : 'none',
booster : false
});
input.on('change', function(e){
scope.value = input.val();
//hack
if(!scope.$$phase) {
scope.$apply();
}
});
}
}
};
});
<input type="text" name="spin" class="form-control spinner-input">
@allanlb

This comment has been minimized.

Copy link

@allanlb allanlb commented Jan 7, 2015

jdelibas, I found two issues in your directive with bootstrap-touchspin:

1 - The property name "stepinterval" on "input.TouchSpin" must be change to "step" to works for me.
2 - The same property must be converted to int to works.(otherwise, the spinner got a problem on _getBoostedStep function).

@agray

This comment has been minimized.

Copy link

@agray agray commented Feb 16, 2015

Thanks @allanlb this still works at my time of writing.

@ravidorr

This comment has been minimized.

Copy link

@ravidorr ravidorr commented Jun 16, 2015

Hi James.
Can you please specify the license for this gist?
It works like a charm, but we can not use it without a license :(

@jdelibas

This comment has been minimized.

Copy link
Owner Author

@jdelibas jdelibas commented Mar 31, 2016

@allanlb Thanks for the input, I've updated the gist to fix the two issues.

@ravidorr Added license, all yours now :)

@waldandrade

This comment has been minimized.

Copy link

@waldandrade waldandrade commented Apr 4, 2016

Enjoy!!!

angular.module('angular-spin', [])
    .directive('spin', function() {
    return {
        templateUrl: contextPath+'/js/angularjs/directives/spinner.html',
        require: 'ngModel',
        scope: {
            ngChange: '&',
            ngKeyup: '&'
        },
        transclude: true,
        restrict: 'E',
        link: function(scope, element, attrs, ctrl) {
          var min,max,step,input,initial;

          element = angular.element(element);

          if(typeof attrs === 'undefined'){
            throw new Error('Spin.js attributes missing');
          } else {

            min = typeof attrs.min !== 'undefined' ? attrs.min : 0;
            max = typeof attrs.max !== 'undefined' ? attrs.max : 999;
            step = typeof attrs.step !== 'undefined' ? attrs.step : 1;

            initial = parseInt(scope.ngModel);

            input = $("input[name='spin']",element);
            input.TouchSpin({
                min: min,
                max: max,
                step:parseInt(step),
                initval: initial,
                forcestepdivisibility:'none'
            });

            input.on('change', function(e){
                ctrl.$setViewValue(input.val());
                ctrl.$render();
            });

              input.on('keyup', function(e){
                  ctrl.$setViewValue(input.val());
                  ctrl.$render();
              });

          }
        }
    };
}); 

Template:
<input type="text" name="spin" class="form-control spinner-input">

Using the directive:
                            <spin id="qtd" ng-model="forno.quantidadeLinha" ng-change="qtdLinhas(forno.quantidadeLinha)" ng-keyup="qtdLinhas(forno.quantidadeLinha)"  min="1" max="200" />




@ravidorr

This comment has been minimized.

Copy link

@ravidorr ravidorr commented Jul 18, 2016

Thank you 👍

@nikitira

This comment has been minimized.

Copy link

@nikitira nikitira commented Oct 24, 2016

If I try yours, it says "input.val() is not a function". Where is it defined?

@Asscobara

This comment has been minimized.

Copy link

@Asscobara Asscobara commented Nov 17, 2016

scope.ngModel == 'undefined'

@lshunran

This comment has been minimized.

Copy link

@lshunran lshunran commented Dec 28, 2016

@Asscobara I guess we have the same question.. So, I make a little change in directive:

`
.directive('spin', function() {
return {
templateUrl: '../app/lib/bootstrap-touchspin/templates/touchspinner.html',
require: 'ngModel',
scope: {
ngChange: '&',
ngKeyup: '&',
value: '@'
},
transclude: true,
restrict: 'E',
link: function(scope, element, attrs, ctrl) {
var min, max, step, input, initial, value;

            element = angular.element(element);

            if (typeof attrs === 'undefined') {
                throw new Error('Spin.js attributes missing');
            } else {

                min = typeof attrs.min !== 'undefined' ? attrs.min : 0;
                max = typeof attrs.max !== 'undefined' ? attrs.max : 999999999;
                step = typeof attrs.step !== 'undefined' ? attrs.step : 1;
                value = typeof attrs.value !== 'undefined' ? attrs.value : 0;

                //initial = parseInt(scope.ngModel);

                input = $("input[name='spin']", element);
                input.TouchSpin({
                    min: min,
                    max: max,
                    step: parseInt(step),
                    initval: value,
                    forcestepdivisibility: 'none'
                });

                input.on('change', function(e) {
                    ctrl.$setViewValue(input.val());
                    ctrl.$render();
                });

                input.on('keyup', function(e) {
                    ctrl.$setViewValue(input.val());
                    ctrl.$render();
                });

            }
        }
    };
})

`

using the directive:
<spin id="qtd" value="{{forno.quantidadeLinha}}" ng-model="forno.quantidadeLinha" ng-change="qtdLinhas(forno.quantidadeLinha)" ng-keyup="qtdLinhas(forno.quantidadeLinha)" />

@egoistonly

This comment has been minimized.

Copy link

@egoistonly egoistonly commented Jan 4, 2017

@lshunran
Better decision is add the model to scope without any other modifications:

scope: { ngModel : '=', ngChange: '&', ngKeyup: '&' },

Voila :)

@waldandrade

This comment has been minimized.

Copy link

@waldandrade waldandrade commented Jan 5, 2017

angular.module('angular-spin', [])
    .directive('spin', function() {
    return {
        templateUrl: contextPath+'/js/angularjs/directives/spinner.html',
        require: 'ngModel',
        scope: {
            ngModel: '=',
            ngChange: '&',
            ngKeyup: '&'
        },
        transclude: true,
        restrict: 'EA',
        link: function(scope, element, attrs, ctrl) {
          var min,max,step,input,initial;

          element = angular.element(element);

          if(typeof attrs === 'undefined'){
            throw new Error('Spin.js attributes missing');
          } else {

            min = typeof attrs.min !== 'undefined' ? attrs.min : 0;
            max = typeof attrs.max !== 'undefined' ? attrs.max : 999;
            step = typeof attrs.step !== 'undefined' ? attrs.step : 1;
            value = typeof attrs.value !== 'undefined' ? attrs.value : 1000;

            input = $("input[name='spin']",element);
            input.TouchSpin({
                min: min,
                max: max,
                step:parseInt(step),
                initval: value,
                forcestepdivisibility:'none'
            });            

            input.on('change', function(e){
                ctrl.$setViewValue(input.val());
                ctrl.$render();
            });

            input.on('keyup', function(e){
                ctrl.$setViewValue(input.val());
                ctrl.$render();
            });

            scope.$watch('ngModel', function(newValue, oldValue) {
                if (!angular.isUndefined(newValue)) {
                    input.val(newValue);
                }
            });


          }
        }
    };
}); 

Esse é meu modelo, funciona perfeitamente. Mas não pode colocar dentro de um md-input-container

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.