Following the AngularJS instruction (directive) Extension Based on jQuery UI Autocomplete in the previous article, a AngularJS Slider extension is released here. For more information about AngularJS, see AngularJs-Javascript MVC Framework, Angular-Bootstrap, Compiler, and Google-AngularJS official documentation.
Html:
<Div ng-app = "app" ng-controller = "test">
<Green-slider style = "margin: 20px;"> </green-slider>
<Green-slider ng-model = "value" style = "margin: 20px; height: 200px; "id =" w1 "class =" 22 "ng-change =" change (); "range =" min "min =" 10 "max =" 80 "step =" 1 "orientation =" vertical "> </green-slider>
<Br/>
Value: {value }};
<Input ng-model = "value" maxlength = "2" style = "width: 25px;"/>
</Div>
Js:
Var prefixed = "green ";
Var appMoule = angular. module ('app', []);
Var slider = function (){
Var linkFun = function ($ scope, element, attrs ){
$ Slider = jQuery (element );
Var option = attrs;
Var tryPrseInt = function (key, option ){
If (option [key]) {
Option [key] = parseInt (option [key]);
}
};
TryPrseInt ("min", option );
TryPrseInt ("max", option );
TryPrseInt ("step", option );
Option = jQuery. extend ({
Value: $ scope [option. ngModel],
Change: function (event, ui ){
If (attrs. ngModel & ui. value! = $ Scope [attrs. ngModel]) {
Var express = attrs. ngModel + '=' + ui. value;
$ Scope. $ apply (express );
If (attrs. ngChange ){
$ Scope. $ eval (attrs. ngChange );
}
}
}
}, Option );
$ Slider. slider (option );
// Back
If (option. ngModel ){
$ Scope. $ watch (option. ngModel, function (val ){
If (val! = $ Slider. slider ("value ")){
$ Slider. slider ("value", val );
}
});
}
Console. log (attrs );
};
Return {
Restrict: 'E ',
Replace: true,
Transclude: false,
Template: '<div/> ',
Link: linkFun
};
};
AppMoule. directive (prefixed + "Slider", slider );
// Test controller: test code
Var test = function ($ scope ){
$ Scope. value = 10;
$ Scope. change = function (){
Console. log ("change", this. value );
};
};
AppMoule. controller ("test", test );
If you have any questions, please contact us and make functional improvements.