当前位置:编程学习 > JS >>

AngularJS Slider指令(directive)扩展

继上一篇基于jQuery UI Autocomplete的AngularJS 指令(directive)扩展,在这里发布一个AngularJS的Slider扩展。如果你还不了解AngularJS话的情参见AngularJs - Javascript MVC 框架,Angular-Bootstrap和Compiler以及Google-AngularJS官方文档.
   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);
      同时有什么问题请多多交流,功能进步
 
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,