AngularJS Slider指令(directive)扩展

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

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

 本文转自 破狼 51CTO博客，原文链接：http://blog.51cto.com/whitewolfblog/983092，如需转载请自行联系原作者