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：

<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:测试代码  
var test = function($scope) {  
    $scope.value = 10;  
    $scope.change = function() {  
        console.log("change", this.value);  
    };  
};  
 
appMoule.controller("test", test); 

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