this is my first post here, so I hope it will be comprehensive.
I'm using AngularJs and I've added a JqueryUI slider using an angular directive. I've found a lot of examples on how to do that, but none of them show me ho to add the initial values to the slider, from the scope.
Here is a jsfiddle I'created
var testApp= angular.module('testApp',['ngResource']);
testApp.factory('remoteRequest', function($resource) {
var remoteRequest = $resource('/echo/json/');
return remoteRequest;
});
testApp.directive('sliderDays', function() {
return {
link: function(scope, elem,attrs) {
$(elem).slider({
range: true,
min: scope.days[1],
max: scope.days[scope.days.length-1],
values: [scope.days[0], scope.days[1]],
slide: function( event, ui ) {
console.log(ui.values[ 0 ] +" "+ ui.values[ 1 ] );
}
});
}
}
});
function TestCtrl($scope, $resource, remoteRequest)
{
$scope.prova=1;
$scope.days=[];
var ret= remoteRequest.get(function(){
$scope.days=[1,2,3,4,5,10,25];
});
}
Any kind of help will be much appreciated, thanks!
Here's a working fiddle from you code, I added comments at places I changed. One main problem you had was that you were trying to access array elements from scope.days before it had any data.
Fiddle
View
<div ng-app="testApp">
<div ng-controller="TestCtrl">
<p><span>{{days[0]}}</span> - <span>{{days[days.length-1]}}</span></p>
<div slider-days days="days"></div>
</div>
</div>
Code
var testApp= angular.module('testApp',['ngResource']);
testApp.directive('sliderDays', function() {
return {
link: function(scope, elem,attrs) {
$(elem).slider({
range: true,
min: scope.days[1],
max: scope.days[scope.days.length-1],
values: [scope.days[0], scope.days[scope.days.length-1]],
slide: function( event, ui ) {
console.log(ui.values[0], ui.values[1]);
}
});
}
}
});
function TestCtrl($scope)
{
$scope.days=[1,2,3,4,5,10,25];
}