Angularjs slider Instruction (Directive) extension

Following the previous ANGULARJS instruction (Directive) extension based on the jquery UI autocomplete, a angularjs slider extension is released here. If you don't understand angularjs, see the Angularjs-javascript MVC Framework, Angular-bootstrap and compiler, and GOOGLE-ANGULARJS official documentation.

Jsfiddle Demo: 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=" "Ng-change=" Change (); 

range= "min" min= "max" = "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);

At the same time have any questions please communicate, function progress