AngularJS Slider指令（directive）扩展

AngularJS Slider指令（directive）扩展2013-02-14 破狼继上一篇基于jQuery UI Autocomplete的AngularJS 指令（directive）扩展，在这里发布一个AngularJS的Slider扩展。如果你还不了解AngularJS话的情参见AngularJs - Javascript MVC 框架，Angular-Bootstrap和Compiler以及Google-AngularJS官方文档.

jsfiddle演示：http://jsfiddle.net/whitewolf/vNfsm/20/embedded/:

html：

<center ng-app="app" ng-controller="test"><green-sliderstyle="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;"/></center>

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: "<center />", link: linkFun }; }; appMoule.directive（prefixed + "Slider", slider）; //test controller:测试代码 var test = function（$scope） { $scope.value = 10; $scope.change = function（） { console.log（"change", this.value）; }; }; appMoule.controller（"test", test）;

同时有什么问题请多多交流，功能进步