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：

<center 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;"/>    </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);

同時有什麼問題請多多交流，功能進步