Sharing AngularJS and jQuery UI Spinner?

A

Andrei2013-10-11 16:28:28

JavaScript

Andrei, 2013-10-11 16:28:28

Greetings!
Started to understand with AngularJS.

I just can not understand how it can be properly made to work in conjunction with the jQuery UI Spinner.
Here is an example that works well.

<body ng-controller="ctrl"><br>
   <label>FirstVal: </label><br>
   <input type="number" ng-model="FirstVal"><br><br>
   <label>SecondVal:</label><br>
   <input type="number" ng-model="SecondVal"><br>   <br>
   Result: <span calculator="FirstVal"></span> <br>

…

var MyModule = angular.module('MyModule', []);<br>
<br>
function ctrl($scope) {<br>
  $scope.FirstVal = 3000;<br>
  $scope.SecondVal = 2000;<br>
}<br>
<br>
MyModule.directive('calculator', function () {<br>
  return function (scope, element, attrs) {<br>
<br>
    scope.$watch(attrs.calculator, function (value) {<br>
        scope.FirstVal = value;<br>
<br>
        element.text(scope.SecondVal + scope.FirstVal);<br>
    });<br>
<br>
    scope.$watch('SecondVal', function (value, asd1) {<br>
        element.text(scope.SecondVal + scope.FirstVal);<br>
    });<br>
  };<br>
});<br>

jsbin.com/ubIViba/1/edit

But if you add a Spinner, then nothing works.

<body ng-controller="ctrl"><br>
   <label>FirstVal: </label><br>
   <input type="number" ng-model="FirstVal"><br><br>
   <label>SecondVal:</label><br>
   <input type="number" id="spinner" ng-model="SecondVal"><br>   <br>
   Result: <span calculator="FirstVal"></span><br>

…

$(function () {<br>
  var spinner = $("#spinner").spinner();<br>
  $('#spinner').spinner({ min: 0, max: 10000, step: 1000 });<br>
<br>
});<br>

jsbin.com/AVeTini/1/edit Is

there any alternative way to implement this functionality without using the jQuery UI Spinner?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

F

freakru, 2013-10-11
@ngelik

I think it needs something like this.

<body ng-controller="ctrl"> 
      <label>FirstVal: </label>
      <input ng-model="FirstVal" spinner>
      <br>
      <label>SecondVal:</label>
      <input ng-model="SecondVal" spinner>
      <br>   
  Result: {{result}}
  
</body>

var MyModule = angular.module('MyModule', []);

function ctrl($scope, numberFilter) {
  $scope.FirstVal = 3000;
  $scope.SecondVal = 2000;
    $scope.result = $scope.FirstVal + $scope.SecondVal;
}

MyModule.directive('spinner', function (numberFilter) {
  return {
    restrict: 'A',
    require : 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
        
      $(function(){
        element.spinner({
          min: 0,
          max: 10000,
          step: 1000,
          spin: function( event, ui ) {
            ngModelCtrl.$setViewValue(ui.value);
            scope.result = scope.FirstVal + scope.SecondVal;
            scope.$apply();          
          }
        });
      });
  }
  };
});

http://jsbin.com/AVeTini/3/edit
And read at your leisure how AngularJS differs from jQuery.
http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background

M

miktemk, 2014-03-04
@miktemk

gentlemen, I want to please you ... I wrote a directive for this plus min and max. Really need jquery.numeric.js
https://github.com/miktemk/ng-spinner

angular.module('ng').directive('ngSpinner', function () {
    function safeApply($scope, callback) {
        ($scope.$$phase || $scope.$root.$$phase)
            ? callback()
            : $scope.$apply(callback);
    }
    return {
        restrict: 'A',
        scope: {
            ngSpinner: '=',
            ngMin: '=',
            ngMax: '='
        },
        link: function (scope, element, attrs) {
            function checkBounds() {
                if (scope.ngMin != null && scope.ngMin != undefined && scope.ngSpinner < scope.ngMin)
                    scope.ngSpinner = scope.ngMin;
                if (scope.ngMax != null && scope.ngMax != undefined && scope.ngSpinner > scope.ngMax)
                    scope.ngSpinner = scope.ngMax;
            }
            element.val(scope.ngSpinner);
            element.spinner({
                min: scope.ngMin,
                max: scope.ngMax,
                spin: function (event, ui) {
                    if (scope.ngSpinner != ui.value) {
                        safeApply(scope, function () {
                            scope.ngSpinner = ui.value;
                        });
                    }
                },
                change: function (event, ui) {
                    if (event.handleObj && event.handleObj.type == "blur") {
                        safeApply(scope, function () {
                            scope.ngSpinner = element.spinner('value');
                            checkBounds();
                            // bounds check changed something! naughty naughty!
                            if (scope.ngSpinner != element.spinner('value'))
                                element.spinner('value', scope.ngSpinner);
                        });
                    }
                }
            });
            element.numeric();
            scope.$watch('ngSpinner', function (nv, ov) {
                if (nv != ov) {
                    element.spinner('value', nv);
                }
            });
            scope.$watch('ngMin', function (nv, ov) {
                if (nv != ov) {
                    element.spinner('option', 'min', nv);
                    checkBounds();
                }
            });
            scope.$watch('ngMax', function (nv, ov) {
                if (nv != ov) {
                    element.spinner('option', 'max', nv);
                    checkBounds();
                }
            });
        }
    };
});