I am trying to use simple jQuery UI. I've included everything and I have this simple script:
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
and
<div id="slider"></div>
My includes:
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/ayaSlider.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
But when I am opening the page there is no slider. According to documentation of angular:
If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery.
However, I don't really understand how can I use angular.element
and there is no example.
Update: I managed to have the slider on the screen but it does not work, I cannot change values or do something with it.
This question is related to
javascript
jquery
angularjs
The best option is create a directive and wrap the slider features there. The secret is use $timeout, the jquery code will be called only when DOM is ready.
angular.module('app')
.directive('my-slider',
['$timeout', function($timeout) {
return {
restrict:'E',
scope: true,
template: '<div id="{{ id }}"></div>',
link: function($scope) {
$scope.id = String(Math.random()).substr(2, 8);
$timeout(function() {
angular.element('#'+$scope.id).slider();
});
}
};
}]
);
You have to do binding in a directive. Look at this:
angular.module('ng', []).
directive('sliderRange', function($parse, $timeout){
return {
restrict: 'A',
replace: true,
transclude: false,
compile: function(element, attrs) {
var html = '<div class="slider-range"></div>';
var slider = $(html);
element.replaceWith(slider);
var getterLeft = $parse(attrs.ngModelLeft), setterLeft = getterLeft.assign;
var getterRight = $parse(attrs.ngModelRight), setterRight = getterRight.assign;
return function (scope, slider, attrs, controller) {
var vsLeft = getterLeft(scope), vsRight = getterRight(scope), f = vsLeft || 0, t = vsRight || 10;
var processChange = function() {
var vs = slider.slider("values"), f = vs[0], t = vs[1];
setterLeft(scope, f);
setterRight(scope, t);
}
slider.slider({
range: true,
min: 0,
max: 10,
step: 1,
change: function() { setTimeout(function () { scope.$apply(processChange); }, 1) }
}).slider("values", [f, t]);
};
}
};
});
This shows you an example of a slider range, done with jQuery UI. Example usage:
<div slider-range ng-model-left="question.properties.range_from" ng-model-right="question.properties.range_to"></div>
This should be working. Please have a look at this fiddle.
$(function() {
$( "#slider" ).slider();
});//Links to jsfiddle must be accompanied by code
Make sure you're loading the libraries in this order: jQuery, jQuery UI CSS, jQuery UI, AngularJS.
Source: Stackoverflow.com