AngularJS Slider指令(directive)扩展
来源:岁月联盟
时间:2012-09-22
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);
同时有什么问题请多多交流,功能进步