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; ...
++