Задать вопрос
ngelik
@ngelik
javascript

Совместное использование AngularJS и jQuery UI Spinner?

Приветствую!

Начал разбираться с AngularJS.



Никак не могу понять, как его можно нормально заставить работать совместно с jQuery UI Spinner.

Вот этот пример работает хорошо.



<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



Но вот если добавить Спиннер, то ничего не работает.



<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



Может быть есть какой-нибудь альтернативный вариант, реализующий подобный функционал, без использования jQuery UI Spinner?
  • Вопрос задан
  • 11317 просмотров
Комментировать
Подписаться 4 Оценить Комментировать
Решения вопроса 2
freakru
@freakru
По-моему нужно как-то так. 

<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

И почитайте на досуге чем AngularJS от jQuery отличается.

http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background
Ответ написан
2 комментария
2 комментария
sHinE
@sHinE
веб-разработчик, php/js/mysql и сопутствующее
Моё ИМХО:
1) Директива калькулятор вообще странная, но оставим её пока.
2) Делайте отдельную директиву, которая будет вешать спинер на элемент аналогично:
angular.module('imr.ui.date', [])
	.directive('datepicker', function () {
		return {
			restrict: 'A',
			require : 'ngModel',
			link    : function (scope, element, attrs, ngModelCtrl) {
				var opts = {
					dateFormat: 'mm/dd/yy',
					changeYear: true,
					onSelect  : function (date) {
						ngModelCtrl.$setViewValue(date);
						scope.$apply();
					}
				}
if (!(attrs.hasOwnProperty('ngReadonly') && scope.$eval(attrs.ngReadonly))) {
					$(function () {
//тут вешайте ваш спиннер
						element.datepicker(opts);
					});
				}
			}
		}
	});
;


<input type="number" id="spinner" ng-model="SecondVal" spinner><br>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@miktemk
джентельмены, хочу вас порадовать... Я написал директиву именно для этого плюс мин и макс. Правда нужен 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();
                }
            });
        }
    };
});
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
3д сцены
23 дек. 2024, в 04:30
10000 руб./за проект
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы