继上一篇基于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：

 
  
  1. <div ng-app="app" ng-controller="test"> 
  2.     <green-slider  style="margin:20px;"></green-slider> 
  3.     <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> 
  4.     <br/> 
  5.     value:`value`;  
  6.     <input ng-model="value" maxlength="2" style="width:25px;"/> 
  7. </div> 
 
  
js：
 
  
 
  
  1. var prefixed = "green";  
  2. var appMoule = angular.module('app', []);  
  3.  
  4. var slider = function() {  
  5.     var linkFun = function($scope, element, attrs) {  
  6.         $slider = jQuery(element);  
  7.         var option = attrs;  
  8.         var tryPrseInt = function(key, option) {  
  9.             if (option[key]) {  
  10.                 option[key] = parseInt(option[key]);  
  11.             }  
  12.         };  
  13.  
  14.         tryPrseInt("min", option);  
  15.         tryPrseInt("max", option);  
  16.         tryPrseInt("step", option);  
  17.  
  18.         option = jQuery.extend({  
  19.             value: $scope[option.ngModel],  
  20.             change: function(event, ui) {  
  21.                 if (attrs.ngModel && ui.value != $scope[attrs.ngModel]) {  
  22.                     var express = attrs.ngModel + ' = ' + ui.value;  
  23.                     $scope.$apply(express);  
  24.                     if (attrs.ngChange) {  
  25.                         $scope.$eval(attrs.ngChange);  
  26.                     }  
  27.                 }  
  28.             }  
  29.         }, option);  
  30.         $slider.slider(option);  
  31.         //back  
  32.         if (option.ngModel) {  
  33.             $scope.$watch(option.ngModel, function(val) {  
  34.                 if (val != $slider.slider("value")) {  
  35.                     $slider.slider("value", val);  
  36.                 }  
  37.             });  
  38.         }  
  39.         console.log(attrs);  
  40.     };  
  41.     return {  
  42.         restrict: 'E',  
  43.         replace: true,  
  44.         transclude: false,  
  45.         template: '<div />',  
  46.         link: linkFun  
  47.     };  
  48. };  
  49.  
  50. appMoule.directive(prefixed + "Slider", slider);  
  51. //test controller:测试代码  
  52. var test = function($scope) {  
  53.     $scope.value = 10;  
  54.     $scope.change = function() {  
  55.         console.log("change", this.value);  
  56.     };  
  57. };  
  58.  
  59. appMoule.controller("test", test); 
 
  
      同时有什么问题请多多交流，功能进步