AngularJs est un très bon framework javascript et combiné avec des plugins préexistant, il devient imbattable.
Ci-dessous, le code pour une directive pour utiliser l’excellent plugin fd-slider avec angularJs et lié par binding une textbox et un slider.
.directive('fdSlider', ["$parse", function ($parse) {
return function (scope, elm, attrs) {
var scaleStr = attrs.scale || "{}";
var scale = $.parseJSON(scaleStr);
if ("fdSlider" in window) {
fdSlider.createSlider({
// Associate an input
inp: elm[0],
// Declare a step
step: attrs.step || 1,
// Declare a maxStep (for keyboard users)
maxStep: attrs.step || 1,
// Min value
min: attrs.min || 1,
// Max value
max: attrs.max || 100,
// Define a scale (multiple points supported, I'm just using one for the
// demo)
scale: scale,
callbacks : {
"change": [function(inp) {
scope.$apply(attrs.sliderModel + "=" + inp.value);
}]
},
// Use the "jump to click point" animation
animation: "jump"
});
}
};
}]);
et un exemple de code html utilisant cette directive :
<input type="number" step="1" min="10" maxStep="100" max="30000"
scale='{"25": "10","50": "100","75": "1000","85": "3000","90": "10000"}'
slider-model="myScopeModel" fd-slider="" ng-model="myScopeModel"></div>
Votre modèle angularJs:
... $scope.myScopeModel = 1000; ...
++